jQuery推遲ajax調用的循環

Question

我目前有一個應用程序依賴於所有正在檢索的數據，然後繼續進一步的代碼。

有一個包含循環的主函數「_update（）」，該循環調用_getData（）。我需要「_update（）」在接收到所有數據時將變量設置爲true。

以下是我有：

DataCollection.prototype._update = function() { 
    var _self = this; 
    var _itemsResponded = 0; 
    var itemData = []; 

    if (_self._ready) { 
     _self._ready = false; 

     this.collection.forEach(function (item, index) { 
      _self.apiData.id = item.id; 

      var ajaxPromise = _self._getData(); 
      ajaxPromise.done(function(data){ 
       itemData[index] = data; 
       _self._itemsResponded++; 
      }); 
     }) 

     if (_self._itemsResponded === _self.collection.length) { 
      _self._ready = true; 
      console.log(itemData); 
      console.log('done'); 
     } 
    } 
} 

DataCollection.prototype._getData = function() { 
    var _self = this; 

    var ajaxPromise = $.ajax({ 
     url: 'ajax.php', 
     data : _self.apiData, 
     dataType: 'json' 
    }); 

    var dff = $.Deferred(); 
    ajaxPromise.then(function(data) { 
     dff.resolve(data); 
    }, function(){ 
     dff.reject(); 
    }); 

    return dff.promise(); 
} 

從我的理解中，_getData功能是否正常工作。這是在更新中的.forEach，不能按預期工作。我認爲.forEach是同步的？

Answer 1

由於在foreach的內容（）方法是異步，foreach循環將執行完完成所有Ajax請求之前，你的支票應該去完成的回調裏面像

DataCollection.prototype._update = function() { 
    var _self = this; 
    var _itemsResponded = 0; 
    var itemData = []; 

    if (_self._ready) { 
     _self._ready = false; 

     this.collection.forEach(function (item, index) { 
      _self.apiData.id = item.id; 

      var ajaxPromise = _self._getData(); 
      ajaxPromise.done(function (data) { 
       itemData[index] = data; 
       _self._itemsResponded++; 

       if (_self._itemsResponded === _self.collection.length) { 
        _self._ready = true; 
        console.log(itemData); 
        console.log('done'); 
       } 
      }); 
     }) 
    } 
} 

---

您可以使用$ .when（）將其簡化爲

DataCollection.prototype._update = function() { 
    var _self = this; 
    var _itemsResponded = 0; 
    var itemData = []; 

    if (_self._ready) { 
     _self._ready = false; 

     var promises = $.map(this.collection, function (item, index) { 
      _self.apiData.id = item.id; 
      return _self._getData(); 
     }); 

     $.when.apply($, promises).done(function() { 
      var itemData = $.map(arguments, function (arr, idx) { 
       return arr[0]; 
      }) 
      _self._ready = true; 
      console.log(itemData); 
      console.log('done'); 
     }) 
    } 
} 

DataCollection.prototype._getData = function() { 
    var _self = this; 

    var ajaxPromise = $.ajax({ 
     url: 'ajax.php', 
     data: _self.apiData, 
     dataType: 'json' 
    }); 
    return ajaxPromise; 
}