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

Question

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

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();
  });

数据已加载，但地图函数未执行。控制台中没有错误显示，并且控制台显示所有数据都已加载。我怀疑它与我传递给 loadMaps 的多个变量 tracts, counties, states 有关，但我不知道如何修复它。我尝试了只将一个变量传递给 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();
});

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

Callbacks and passing variables to second function

javascript

callback

mapbox

mapbox-gl