参见英文答案 >
JavaScript closure inside loops – simple practical example37个
如果我在循环中调用jQuery.ajax(),它会导致当前迭代中的调用覆盖最后一次调用还是为新请求分配了新的XHR对象？
如果我在循环中调用jQuery.ajax(),它会导致当前迭代中的调用覆盖最后一次调用还是为新请求分配了新的XHR对象？
我有一个循环来执行此操作,而从控制台日志我可以看到请求完成200 ok但是循环中最后一个请求的结果数据由请求成功回调存储为假设.
代码：
var Ajax = {
pages: {},current_request: null,prefetch: function () {
currentPath = location.pathname.substr(1);
if(this.pages[currentPath])
{
var current = this.pages[currentPath];
delete this.pages[currentPath];
current['name']=currentPath;
current['title']=$("title").text().replace(' - '.SITE_NAME,'');
current['Meta_description']=$("Meta[name=description]").attr('content');
current['Meta_keywords']=$("Meta[name=keywords]").attr('content');
}
var _Ajax = this;
//the loop in question *****
for(var key in this.pages)
{
$.ajax({
method: 'get',url:'http://'+location.hostname+'/'+key,success: function(data) {
_Ajax.pages[key] = data;
}
});
console.debug(this.pages);
}
if(current)
{
this.pages[currentPath] = current;
}
}
};//Ajax Obj
for(var i in pages)
{
Ajax.pages[pages[i]]={};
}
$(function() {
Ajax.prefetch();
});//doc ready
解决方法
你需要一个关键的闭包：
for(var k in this.pages){
(function(key){
$.ajax({
method: 'get',success: function(data) {
_Ajax.pages[key] = data;
}
});
console.debug(this.pages);
})(k);
}
这样你可以确保每个ajax成功回调中的键始终是正确的.
但除此之外,它应该工作
我使用超时代替ajax做了一个小闭包演示,但原理是一样的：
