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

Данные, которые получают неправдоподобное законен, но строка журнала всегда печатает «ПОЛУЧИЛ ЦВЕТЫ ДЛЯ бесцветный» последние ключи.

Answer 1

Это же, как и оценка

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

Вы получите 100 раз число 100 вошли в консоль.

Это из-за содержимого вашего цикла for async.

Чтобы предотвратить это, вы можете использовать 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) 
}