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，完成

感谢。

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

JQuery Chaining Deferreds没有回调金字塔

2 个答案: