Question

我创建了一个简单的列表，用setTimeout测试jQuery Deferred。

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

在我的脚本上，我创建了一个简单的函数。背后的想法是，对于每个LI，它将以特定间隔替换内容，并且当一切都完成时，它将打印出所有已完成的内容。消息。

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秒钟，所有内容都已完成＆＃39;。

目前，它将打印所有已完成的＆＃39; 2秒后，将在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

jQuery.Deferred with setTimeout

1 个答案: