javascript - 处理来自多个 AJAX JQuery 查询的独立数据

Question

我有许多从 for 循环发送的 AJAX 请求，并希望根据循环中的位置将一些数据发送到回调函数。

当我尝试将一个函数附加到每个请求时，它们似乎都从上次调用中获取数据，例如，

for(var i=0; i < 4; i++){
    data = ... //some unique data
    req = $.post('/update/add', data, function(r_data, textStatus, jqxhr){
        console.log(data);
    }, "json")
}

会给我来自 i = 3 条目的数据，而不是 4 个不同的条目。如何将这些数据传递给回调函数？

谢谢大家...

Answer 1

问题在于，当在 i 变量上创建闭包时，它引用相同的变量而不是创建新的 i 变量。为避免这种不良影响，您可以执行以下操作。

for(var i=0; i < 4; i++){
    data = ... //some unique data
    req = $.post('/update/add', data, (function (i) {
        //return a new callback function
        return function (r_data, textStatus, jqxhr) { 
            //callback logic
            //i will be the right index now
        };
    })(i), "json");
}

在上面的示例中，我们将回调函数包装在一个自执行函数中，该函数被传递给循环的 i 值。由于 i 变量是在自执行函数的范围内定义的，我们现在可以安全地返回一个新的回调函数，它将在 i 的变量上创建一个闭包自执行函数，而不是循环中使用的 i 变量。

注意:要优化您的代码，您可以避免每次都创建一个新的自执行函数。

function createCallback(i) {
     return function (r_data, textStatus, jqxhr) {
         console.log(i);
     };
}

/*
    loop
        post(..., createCallback(i));
 */