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函数正常工作。 _update中的.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;
}