问题描述
这个问题可能是[ -我正在应用的 。
我的问题是闭包不会在循环中遍历所有元素 。 但是，浏览器的网络显示所有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 -th个元素都在处理中：
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位置匹配的数据。
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调用实际上失败了。
2楼
我通过避免将ajax对象传递给done()函数来找到解决方案，而改用了callback 。
从概念上讲，我没有弄清楚为什么先前的代码会出错：如果您可以帮助发现差异，我将很高兴。
@monstruash提出了在先前代码中某些ajax调用可能失败的可能性。
我还让jquery在这里自行处理回调： jsonp = callback [ 关于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
})
});