jQuery.Deferred 与 setTimeout

Question

我创建了一个简单的列表来测试带有 setTimeout 的 jQuery Deferred。

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

在我的脚本中，我创建了一个简单的函数。背后的想法是，对于每个 LI，它会在一定的时间间隔替换内容，当一切完成时，它会打印“all done”消息。

function listing() {
    var deferred = $.Deferred();
    var promises = [];
    var promise;
    var index = 0;
    var list = $('ul').find('li');
    list.each(function(index) {
        var that = $(this);
        promise = $.Deferred();
        (function(i){
            setTimeout(function() {
                that.html(i);
                promise.resolve();
                promises.push(promise);
            }, 8000*index);
        })(index);

    });

    $.when.apply(null, promises).then(function() {
        setTimeout(function() {
            deferred.resolve();
        }, 2000);
    });

    return deferred.promise();
}

$.when(listing().done(function() {
    console.log('all done');
}));

预期结果是每 8 秒替换 LI 的内容，一旦全部替换，它将等待 2 秒，然后打印“全部完成”。

目前，它将在 2 秒后打印 'all done'，并在 8 秒后替换 LI。

我是 jQuery Deferred 的新手，欢迎任何建议。

Answer 1

问题是你没有在每个循环中向 promises 数组推送任何东西

function listing() {
    var deferred = $.Deferred();
    var promises = [];
    var promise;
    var index = 0;
    var list = $('ul').find('li');
    list.each(function (index) {
        var that = $(this);
        var deferred = $.Deferred();
        setTimeout(function () {
            that.html(index);
            deferred.resolve();
        }, 8000);
        //push the deferred outside the timeout
        promises.push(deferred.promise());
    });

    $.when.apply($, promises).then(function () {
        setTimeout(function () {
            deferred.resolve();
        }, 2000);
    });

    return deferred.promise();
}

$.when(listing().done(function () {
    console.log('all done');
}));

演示：Fiddle