javascript - AngularJS:使用回调在循环中获取数据

Question

我尝试在循环中获取多个 json 文件。数据已获取，但在我的回调函数中，我为每个结果留下了循环的最后一个键。

这是调用者:

deckbuilderApp.factory('DeckFactory', ['$http', '$rootScope', 'DataFactory', function($http, $rootScope, DataFactory) {

  var cardColors = {"white":{}, "blue":{}, "black":{}, "red":{}, "green":{}, "colorless":{}};
  var cardColorsCheck = {"white":true, "blue":true, "black":true, "red":true, "green":true, "colorless":true};

  return {
    fetchCardColors: function() {
      for (key in cardColors) {
        if (cardColors.hasOwnProperty(key)) {
          DataFactory.cardColors(key, function(cardIds) {
            console.log("GOT COLORS FOR " + key);
            cardColors[key] = cardIds;
          });
        }
      }
    }
  }
}

被调用者:

deckbuilderApp.factory('DataFactory', function($http) {
  return {
    cardColors: function(color, callback) {
      $http({
        method: 'GET',
        url: 'js/cardColors/' + color + '.json'
      }).success(callback)
    }
  }
}

获取的数据是合法的，但日志行总是打印最后一个键的“GOT COLORS FOR colorless”。

Answer 1

这和求值是一样的

for (var i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}

您将获得 100 次数字 100 登录到控制台。

这是因为您的 for 循环的内容是异步的。

要防止这种情况，您可以使用 let(闭包、iife 等):

for (var i = 0; i < 100; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, 0)
    })(i)
}

这种模式是如此常见，以至于在新的 JavaScript (ES6) 中有一个 let 关键字:

for (let i = 0; i < 100; i++) {
    setTimeout(function () {
        console.log(i);
    }, 0)
}