javascript - jQuery $.when.apply 没有按预期工作

Question

我正在尝试使用 jQuery 的 $.when.apply 在调用下一个函数 (loadTab) 之前等待未知数量的请求完成。我以为我使用它是正确的，但它绝对不是在调用 loadTab() 之前等待所有请求完成，所以我不确定哪里出了问题。这是我的代码:

function update(changes) {
    var deferreds = [];

    // must loop over changes and call individual requests
    for(var i = 0; i < changes.length; i++) {
        var direction = changes[i]['direction'];
        var data = changes[i]['data'];

        if(direction == 'add') {
            deferreds.push[add(data)];
        }
        else if(direction == 'edit') {
            deferreds.push[edit(data)];
        }
        else if(direction == 'delete') {
            deferreds.push[delete(data)];
        }
    }

    return $.when.apply($, deferreds); // this when is resolving too soon
}

function add(data) {
    return $.ajax({
        url: 'add',
        data: data,
        method: 'post',
        error: ajaxErrorFcn
    })
    .then(function(response) {
        handleTimeout(response);
    });
}

function edit(data) {
    return $.ajax({
        url: 'edit',
        data: data,
        method: 'post',
        error: ajaxErrorFcn
    })
    .then(function(response) {
        handleTimeout(response);
    });
}

function delete(data) {
    return $.ajax({
        url: 'delete',
        data: data,
        method: 'post',
        error: ajaxErrorFcn
    })
    .then(function(response) {
        handleTimeout(response);
    });
}

// this is the sequence of events I'm trying to sort out
showLoad('#container');
var changes = buildChangesArray();
update(changes)
.then(function(response) {
    if(handleTimeout(response)) {
        // this is executing before the requests triggered by update() are complete
        return loadTab()
        .then(function(response) {
            // do some other stuff
        });
    }
})
.then(function(response) {
    hideLoad('#container');
});

更新:

最初的问题已解决(我对 .push() 的调用有错字，使用方括号而不是圆括号)，但现在这段代码出现了新问题。我需要修改 update() 函数以先运行删除操作，然后运行添加和编辑操作。这就是我所拥有的，但现在我看到添加和编辑操作在删除操作完成之前开始运行:

function update(changes) {
    var deferreds = [];
    var deletes = [];

    // must loop over changes and call individual requests
    for(var i = 0; i < changes.length; i++) {
        var direction = changes[i]['direction'];
        var data = changes[i]['data'];

        if(direction == 'add') {
            deferreds.push(add(data));
        }
        else if(direction == 'edit') {
            deferreds.push(edit(data));
        }
        else if(direction == 'delete') {
            deletes.push(delete(data));
        }
    }

    // we need to perform all the delete operations first, then the adds/edits
    return $.when.apply($, deletes) // this when is resolving too soon
    .then(function(response) {
        return $.when.apply($, deferreds);
    });
}

Answer 1

好吧，看来我找到了自己的解决方案:)

我认为问题在于，当将对 add()、edit() 和 delete() 的异步调用推送到数组中时，它们也会在此时被调用!这在第一个版本中不是问题，因为添加、编辑和删除的执行顺序无关紧要，只要它们在调用 loadTab() 之前全部完成即可。但是，如果在调用任何添加或编辑之前需要调用所有删除，这确实会带来问题，因为在删除之前在数组中发现的任何添加或编辑将在被推送到数组后立即开始运行，而不是等待删除。

为了解决这个问题，我将代码更改为以下内容:

function update(changes) {
    var loop = function(deleteOnly) {
        var array = [];

        // must loop over changes and call individual requests
        for(var i = 0; i < changes.length; i++) {
            var direction = changes[i]['direction'];
            var data = changes[i]['data'];

            if(direction == 'add' && !deleteOnly) {
                array.push(add(data));
            }
            else if(direction == 'edit' && !deleteOnly) {
                array.push(edit(data));
            }
            else if(direction == 'delete' && deleteOnly) {
                array.push(delete(data));
            }
        }

        return array;
    };

    // we need to perform all the delete operations first
    return $.when.apply($, loop(true)) // true means only get the deletes
    .then(function(response) {
        return $.when.apply($, loop(false)); // false means only get the adds/edits
    });
}

因此，请求在被插入数组后仍会立即开始运行，但通过这种方式，我们可以分离删除以确保它们先完成。