Javascript jQuery.deferredwithsettimeout

我创建了一个简单的列表来测试使用setTimeout延迟的jQuery

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

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

目前，它将在2秒后打印“全部完成”，并在8秒后替换LIs

---

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

问题是您没有在每个循环中向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');
}));

---

演示：

我可能错了，但似乎“全部完成”消息会立即打印出来？@user3427578，如果它在超时时间内。。在执行超时回调之前，承诺不会添加到数组中。。。因此，当执行

$时，

承诺

数组为空，请您解释。
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');
}));