没有回调金字塔的 JQuery Chaining Deferreds

Question

有没有一种方法可以在没有回调金字塔的情况下链接 JQuery Deferreds 来依次执行？

现在我必须做这样的事情:

$.Deferred(function(dfd) {
    setTimeout(function() { 
        console.log('Foo'); 
        dfd.resolve(); 
    }, 1000);
})
.done(function() {
    $.Deferred(function(dfd) { 
        console.log('Bar');
        dfd.resolve();
    }).done(function() { 
         console.log('done');
    });
});

输出:Foo、Bar、完成

我希望能够做这样的事情:

$.Deferred(function(dfd) {
    setTimeout(function() { 
        console.log('Foo'); 
        dfd.resolve(); 
    }, 1000);
})
.then($.Deferred(function(dfd) { 
    console.log('Bar');
    dfd.resolve();
}))
.done(function() { console.log('done') });

不需要的输出:Bar、Foo、done

谢谢。

Answer 1

您的代码的问题是您正在传递 .then() 一个 jQuery 对象，而它需要一个 function。此代码根据需要执行 foo-bar-done。

$.Deferred(function(dfd) {
    setTimeout(function() { 
        console.log('Foo'); 
        dfd.resolve(); 
    }, 1000);
}).then(function(){ 
    return $.Deferred(function(dfd) { 
         console.log('Bar');
         dfd.resolve();
     });
}).done(function() { console.log('done') });