我的 jQuery Deferred() 用法有什么问题？答案

【问题标题】：What is wrong with my jQuery Deferred() usage?我的 jQuery Deferred() 用法有什么问题？
【发布时间】：2013-02-21 14:04:53
【问题描述】：

我正在尝试使用 Deferred 来正确排序对 API 的删除调用。该应用程序处理项目和图像：

Item:
ItemId

Images:
ImageId
ItemId

所以必须先删除图像，然后才能删除与之关联的项目，否则我的 DeleteItem() ajax 调用将在数据对象中返回错误。

在下面的代码中，我试图在进行任何 DeleteItem() ajax 调用之前对所有 DeleteImage() ajax 调用进行分组。

var deferreds1 = [];  
var deferreds2 = [];   

...
// push()ing an unknown number of DeleteImage() ajax calls to deferred1 
// push()ing an unknown number of DeleteItem() ajax calls to deferred2
...

if (deferreds1.length > 0) {
    $.when
        .apply($, deferreds1)
        .then(function(){
             console.log('deferred1 then');
             $.when
                  .apply($, deferreds2)
                  .then(function() {
                       console.log('deferred2 then');
                  })
                  .fail(function() {
                       console.log('deferred2 fail');
                  });
             })
         .fail(function(){
              console.log('deferred1 fail');
         });
}

function DeleteItemImage() {
    var dfd = $.Deferred();

    $.ajax({
        ...
        success: function (data) {
            if (!data.success) {
                alert('error');
            }
            dfd.resolve();
        }
        ...
    }); 

    return dfd.promise();
}

function DeleteItem() {
    var dfd = $.Deferred();

    $.ajax({
        ...
        success: function (data) {
            if (!data.success) {
                alert('error');
            }
            dfd.resolve();
        }
        ...
    }); 

    return dfd.promise();
}

似乎大部分时间都是按照预期的顺序拨打电话的，但并非一直如此。帮助我找到我确定我缺少的一个小细节。

【问题讨论】：

标签： jquery jquery-deferred

【解决方案1】：

看起来您在解决所有 DeleteItemImage 延迟问题之前调用了您的 DeleteItem 函数。我认为你需要这样做。

var deferreds1 = [];  
var deferreds2 = [];   

...
// push()ing an unknown number of DeleteImage() ajax calls to deferred1 
// do not call DeleteItem here.  Wait until all of deferreds1 are resolved.
...

if (deferreds1.length > 0) {
    $.when
        .apply($, deferreds1)
        .done(function(){
             console.log('deferred1 done');
             // NOW call DeleteItem and add to deferreds2,
             // since now all the Images are deleted.
             deferreds2.push(DeleteItem()); // for each item...
             $.when
                  .apply($, deferreds2)
                  .done(function() {
                       console.log('deferred2 done');
                  })
                  .fail(function() {
                       console.log('deferred2 fail');
                  });
             })
         .fail(function(){
              console.log('deferred1 fail');
         });
}

【讨论】：