javascript - 在 $.Deferred.done() 中调用很快

Question

这是一个说明我的问题的例子。

$.fn.Heartbeat = function(){
  console.log('started');
  $.ajax({
    url:baseurl.php,
    .
    .
    .
    success: function(data){
      //DO SOME STUFF
      console.log('end of success');
    }
} 

$.when($('.mydiv').Heartbeat()).done(function(){console.log('after done');});

这段代码输出:

开始

完成后

成功结束

虽然我想要:

开始

成功结束

完成后

我的意思是，DONE 中的函数必须在 Heartbeat 完成后执行，否则它不会完成。

Answer 1

这是一种奇怪的方式，但首先您需要将 Heartbeat 函数添加到 jQuery 的原型(prototype)中，以便能够链接它。

其次，您需要将来自 ajax 函数的 promise 返回给 $.when，只有这样 done 回调才会在 promise 解析时执行，如下所示

$.fn.Heartbeat = function () {
    console.log('started');
    return $.ajax({
        url: 'baseurl.php',
        success: function (data) {
            //DO SOME STUFF
            console.log('end of success');
        }
    });
}

$.when($('.mydiv').Heartbeat()).done(function () {
    console.log('after done');
});

FIDDLE

---

要为每个元素发送一个 ajax 请求，并在所有请求成功完成后解决 promise ，您可以这样做

$.fn.Heartbeat = function () {
    console.log('started');

    var def = new Deferred();

    $.when.apply(undefined, 
        $.map(this, function() {
            return $.ajax({
                url: '/echo/html/',
                success: function (data) {
                    //DO SOME STUFF
                    console.log('end of success');
                }
            });
        })
    ).then(def.resolve);

    return def.promise();
}

$('.mydiv').Heartbeat().done(function () {
    console.log('after done');
});