[英]jQuery ajax loop and iteration scope
我想知道为什么在i变量下面的代码仍显示“5”而不是显示“1”然后显示“2”然后显示“3”等等? 必须是范围问题,但我并没有真正得到它,因为我在全局和dom范围内更改了i变量的范围,但仍然遇到了同样的问题。 当我在ajax函数之外提醒我时 ,它运行良好。
for (var i = 0; i < 5; i++) {
$.ajax({
url: '/echo/html/',
method:'post',
data: {
html: 'Ajax data'
},
success: function (resp) {
$('#success').append(i) // always 5
}
})
$('#outsideAjax').append(i); // is okay
}
这是小提琴
编辑:
我选择了@Tushar Gupta解决方案,因为它最适合我的需求但我得到了另一个问题,如果我设置了这个选项,迭代将无效: processData:false
看小提琴
为什么这不起作用?
这是由于JavaScript中的闭包。 这是修复 -
for (var i = 0; i < 5; i++) {
(function(i){
$.ajax({
url: '/echo/html/',
method:'post',
data: {
html: 'Ajax data'
},
success: function (resp) {
$('#success').append(i)
}
})
})(i);
$('#outsideAjax').append(i);
}
你可以使用闭包来修复它,包装i的值:
for (var i = 0; i < 5; i++) {
(function(val){
$.ajax({
url: '/echo/html/',
method:'post',
data: {
html: 'Ajax data'
},
success: function (resp) {
$('#success').append(val);
}
})
$('#outsideAjax').append(val); // is okay
})(i);
}
使用Function#bind()
解决方案:
http://jsfiddle.net/RQncd/1/
for (var i = 0; i < 5; i++) {
$.ajax({
url: '/echo/html/',
method:'post',
data: {
html: 'Ajax data'
},
success: (function (i, resp) {
$('#success').append(i);
}).bind(null, i)
});
$('#outsideAjax').append(i);
}
var i = 0;
function ajax_call() {
$.ajax({
url: '/echo/html/',
method: 'post',
data: {
html: 'Ajax data'
},
success: function (resp) {
$('#success').append(i++);
if (i < 5) {
ajax_call();
}
}
});
$('#outsideAjax').append(i);
};
ajax_call();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.