Question

此问题可能与[AJAX call in for loop won't return values to correct array positions重复 - 我正在应用answer of Plynx。

我的问题是闭包不会遍历循环中的所有元素。然而，浏览器的网络显示所有ajax调用都已成功。

ajax将返回与闭包上传递的当前元素不匹配的数据。

我有一系列ID 项目;当前ID由循环中的i位置给出; ajax调用应该处理循环中的当前ID并返回如下数据：

data[id] = {object}

由于闭包正在跳过循环的某个i元素，因此提供给闭包的当前id（items[i]）与返回的数据不匹配。

// ajax function test: it returns "data[key] = ..", where key === id
function fetchDecorator (id) {

  var loadurl = 'http://localhost/';

    return $.ajax({
    url: loadurl,
    type: 'GET',
    cache: true,
    async: true,
    dataType: 'jsonp',
    data: {
       id: id
     },
    jsonpCallback: 'onFetchComplete'

  });

};

// callback function for ajax response
function onFetchComplete(data) {
  console.log('is data fetched?', data);
  return data
}

//items is an array of numeric ids: [7955,943987,4834331,..]
    for (var i = items.length - 1; i >= 0; i--) {

        (function (i){
            var currentID = items[i];
// first test
            console.log('current i',i,'current id', currentID);

            fetchDecorator(items[i])
            .done(function(data){
// second test
                console.log('current i',i ,',current ID in items[i] is', items[i], 'actual ID is:', Object.keys(data));
            })
        })(i);

    };

测试结果：

（1）正在处理所有i个元素：

current i 209 , current id 24159975
current i 208 , current id 30833420
current i 207 , current id 14778161
current i 206 , current id 5798582
...

你能帮忙搞清楚闭包不处理所有元素的原因吗？

（2）在闭包中跳过了一些i个元素:(这里，208,207,205,204缺失）;返回的实际ID与当前ID不同：

current i 209, current ID in items[i] is 24159975, actual ID is: ["14778161"]
current i 206, current ID in items[i] is 5798582, actual ID is: ["5798582"]
current i 203, current ID in items[i] is 37369491, actual ID is: ["27962727"] ...

我需要确保闭包将处理所有元素并返回与当前i位置匹配的数据。

Answer 1

因此currentID和items[i]都有正确的ID，但是从ajax调用中收到的数据却有错误：

current i 209 , current id 24159975
...
current i 209, current ID in items[i] is 24159975, actual ID is: ["14778161"]

如您所见，data包含错误的数据。绝对不是关闭的问题。

并且跳过某些项目的原因是因为没有为其中一些调用done回调，即某些ajax调用实际上失败了。

Answer 2

我通过避免将ajax对象传递给我找到了解决方案 done()功能，改为使用callback。

从概念上讲，我没有弄清楚为什么以前的代码会出错：如果你能帮助发现差异，我会很高兴。

@monstruash提出了在前面的代码中，某些ajax调用可能失败的可能性。我还让jquery在这里自己处理回调：jsonp = callback 关于ajax的[http://api.jquery.com/jQuery.ajax/](jquery文档）

这就是我所做的：

function fetchDecorator (id, callback) {

var loadurl = 'http://localhost/';

return $.ajax({
url: loadurl,
type: 'GET',
cache: true,
async: true,
dataType: 'jsonp',
data: {
   id: id
 },
jsonp: 'callback',
success: callback

});
};


// then, for each element, do something
// here I used a map() function, but you could use a loop too
// 'items' is an array of ids.

$.map(items, function( id, position ) {
                fetchDecorator(id, function(data){
                    console.log(id, items[position], data.query.pages);
                    // do something

                })

            });

尽管闭包绑定了当前值位置的范围，但for循环中的ajax将不会在数组位置返回正确的值

2 个答案: