javascript - 多个each和ajax请求

Question

所以这是我的设置:我在多个元素上调用 .each ，经过几次检查后，我发送带有一些 JSON 数据的 ajax 请求，成功后我将服务器响应作为属性应用到每个元素(它通常是一个 id)。之后，我将 id 推送到数组中。

问题在于，显然 ajax 请求是异步的，并且使用元素 id 数组的函数会在所有 ajax 有时间完成之前触发。

我尝试过使用 .when 和 .then，但是回调函数总是在 ajax 之前被触发。

这是我的代码的外观(我删除了一些不必要的部分):

var order = [];

function sub(selector){

selector.each(function(){
    var out = {
        "some":"random",
        "stuff":"here"
    };
        $.ajax({
            type: "POST" 
            url: "/test/url",
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data:JSON.stringify(out),
            success:function(response){
                $(this).attr("data-response",response);
                order.push(response);
            }
        })
    })
}

$("#button").click(function(){
    $.when(sub($(".test"))).then(function() {
        console.log(order);
        //i have to run the sub function twice so the order doesn't return undefined
    });     
});

Answer 1

问题在于 when 作用于延迟对象，但是 sub 不会返回任何内容，因此 when 会立即触发。因此，您需要做的是收集 ajax 调用返回的所有延迟对象并返回它们:

var order = [];

function sub(selector){
    var deferredList = []
    selector.each(function(){
        var out = {
            "some":"random",
            "stuff":"here"
        };
        var deferred = $.ajax({
                type: "POST", 
                url: "/test/url",
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data:JSON.stringify(out),
                success:function(response){
                    $(this).attr("data-response",response);
                    order.push(response);
                }
            })
        deferredList.push(deferred)
    })
    return deferredList;
}

$("#button").click(function(){
    $.when.apply($,sub($(".test"))).then(function() {
        console.log(order);
        //i have to run the sub function twice so the order doesn't return undefined
    });     
});

直接使用 apply 而不是 when 的原因是 when 不接受对象数组作为参数，并且 apply 为我们提供了解决方法。