jquery - 没有回调金字塔的 JQuery 链接延迟

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') });

Answer 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')});