没有回调金字塔的 JQuery 链接延迟答案

【问题标题】：JQuery Chaining Deferreds without callback pyramids没有回调金字塔的 JQuery 链接延迟
【发布时间】：2013-03-04 19:56:17
【问题描述】：

有没有办法在没有回调金字塔的情况下链接 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

谢谢。

【问题讨论】：

标签： jquery callback jquery-deferred

【解决方案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') });

【讨论】：

注意：这只适用于 JQuery 1.8+。在此之前，您需要使用.pipe()。
在 1.6/1.7 之前，.pipe() 不起作用。除非另有说明，否则我假设 jQuery 问题指的是最新版本，在这种情况下，这个答案是正确的，应该这样标记。
抱歉，我没有标记它，因为在进一步测试后我发现它不起作用。第一个原因是 JQuery 版本，但第二个原因是缺少 return 关键字，我已经更正了。

【解决方案2】：

我想你想使用$.when()。

这样的事情应该可以工作：

var d1 = $.Deferred(function(dfd) {
    setTimeout(function() { 
        console.log('Foo'); 
        dfd.resolve(); 
    }, 1000);
});

var d2 = $.Deferred(function(dfd) { 
    setTimeout(function() { 
      console.log('Bar');
      dfd.resolve();
    }, 2000);
});

$.when(d1, d2).then(function() {console.log('done')});

【讨论】：