Question

我有一张需要大量数据的地图。数据函数加载数据，然后映射函数以先前加载的数据执行。这是执行此操作的代码，并且运行良好：

var states;
var counties;

function loadData() {
  function getStates() {
    return fetch(states.json).then(function(response) {
      return response.json();
      });
    }

  getStates().then(function(response) {
    states = response;
    console.log(states);
    });

  function getCounties() {
    return fetch(counties.json).then(function(response) {
      return response.json();
      });
    }

  getCounties().then(function(response) {
    counties = response;
    console.log(counties);
    });
}

function loadMaps() {

  /*------map function here that uses the counties,
          and states variables to build the map---------*/

  }

loadData();
loadMaps();

当我需要更大的数据文件tracts时，问题就开始了。我使用了回调函数来确保loadData在执行loadMaps之前完成。这是代码：

var states;
var counties;
var tracts;

function loadData(subject, callback) {
  function getTracts() {
    return fetch(tracts.json).then(function(response) {
      return response.json();
      });
    }
  getTracts().then(function(response) {
    tracts = response;
    console.log(tracts);

    function getCounties() {
      return fetch(counties.json).then(function(response) {
        return response.json();
        });
      }

    getCounties().then(function(response) {
    counties = response;
    console.log(counties);

      function getStates() {
        return fetch(states.json).then(function(response) {
          return response.json();
          });
        }

      getStates().then(function(response) {
        states = response;
        console.log(states);

      callback(tracts, counties, states);
      console.log(`Loading year ${year} map.`);

      }); //------------getStates
    }); //-----------getCounties
  }); //----------getTracts
} //---------loadData

function loadMaps() {

  /*------map function here that uses the tracts, counties,
          and states variables to build the map---------*/

  }

loadData("2018", function() {
  loadMaps();
  });

数据已加载，但map函数未执行。控制台中没有错误显示，并且控制台显示所有数据都已加载。我怀疑这与我传递给tracts, counties, states的多个变量loadMaps有关，但是我不知道该如何解决。我仅通过传递给loadMaps的一个变量进行了尝试，而loadMaps仍然没有执行。如果我注释掉loadData，则loadMaps运行（尽管有很多错误，因为states，counties和tracts为空）。我刚开始学习回调，并且已经尝试将其工作近一周了。变量是否没有传递给loadMaps？为什么loadMaps仍然不执行，只是显示数据丢失了？

Answer 1

我简化了您的代码。您的嵌套结构某种程度上太复杂且容易出错。现在，代码将完全执行。我唯一的问题是，我嘲笑了fetch()函数，但没有得到有效的响应对象。因此，我不得不注释掉xyz = response.json()行。由于代码卡在那里。

看看是否有帮助。

var states = {};
var counties = {};
var tracts = {};

function loadData(subject, callback) {
  console.log('loadData: ', subject);

  getTracts(); // start    

  function getTracts() {
    console.log('getTracts()');

    fetch(tracts.json).then(function(response) {
          console.log('tracts: ', response);
          // tracts = response.json();

          // next
          getCounties();
      });
  }

  function getCounties() {
    console.log('getCounties()');
    fetch(counties.json).then(function(response) {
          console.log('counties: ', response);
          // counties = response.json();

          // next
          getStates();
      });
  }

  function getStates() {
    console.log('getStates()');
    fetch(states.json).then(function(response) {
          console.log('states: ', response);
          // states = response.json();

          // finish
          callback(tracts, counties, states);
      });
  }
} //---------loadData

function fetch() {
    return new Promise(function(resolve, reject) { resolve({content: 'foo'}); });
}

function loadMaps() {

    console.log('inside map');
    console.log('tracts inside map: ', tracts);
    console.log('counties inside map: ', counties);
    console.log('states inside map: ', states);

  }

loadData("2018", function() {
  loadMaps();
});

回调并将变量传递给第二个函数

1 个答案: