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

我有一张需要大量数据的地图。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();

当我需要一个大得多的数据文件时，问题就出现了。我使用了一个回调函数来确保

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、country、states

有关，但我不知道如何修复它。我尝试了一下，只将一个变量传递给

loadMaps

，而

loadMaps

仍然没有执行。如果我注释掉

loadData

，

loadMaps

将运行（尽管由于

状态

，

县

和

域

为空，因此会出现一系列错误）。我是新来学习回调的，并且已经试着让它工作了将近一个星期。变量是否未传递到

加载映射

？为什么不执行loadMaps，只显示数据丢失了呢？

我简化了你的代码。您的嵌套结构在某种程度上过于复杂且容易出错。现在代码完全执行。我唯一的问题是，我模拟了

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

---

我更改了嵌套，现在执行

loadMaps

。但是回调没有通过，因为我从

loadMaps

中的变量中得到了错误，这些变量依赖于

状态

、

县

和

域

。我认为嵌套可能只是问题的一部分。你能说明变量的内容是什么以及错误是什么吗？这是一个映射框错误：“图层‘2010srt’在地图样式中不存在，无法查询特性。”

loadMaps

使用

状态

构建图层

2010srt

。如果它没有来自

状态的数据

，则无法构建层。内容是json格式的地理数据（lat/long、地名等），例如[GISJOIN:“G01000020100”，“YEAR”：2010，“REGIONA”：3，“division”：6，“STATE:“Alabama”，“STATEA”：1，“COUNTY:“Autauga COUNTY”}]解决了它。在

loadMaps

能够访问从

loadData

传递的变量之前，我必须先加载MapBox底图。