jQuery ajax循环和迭代范围
jQuery ajax loop and iteration scope
我想知道为什么在下面的代码中,I变量仍然显示"5",而不是显示"1"然后显示2"然后"3"等等?这肯定是一个范围问题,但我并没有真正理解,因为我在全局和dom范围中更改了I变量的范围,但仍然遇到同样的问题。当我在ajax函数外提醒I时,它工作得很好。
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);
}
fiddle Demo
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();
使用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);
}
相关文章:
- 如何在javascript中迭代数字列表
- JS:检查URL中的参数,然后迭代一个参数为var的函数
- 如何迭代Array.prototype函数
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 在ejs-partial中对JSON对象进行迭代
- 如何在DataTables 2.1中迭代对象数组
- 使用递归属性迭代保留属性结构
- 正在停止.在jquery中的特定时间间隔内,每次迭代的每次执行
- 如果30秒未单击,请应用CSS一次,将其删除,然后重新迭代
- 主干-从模板中迭代的集合中获取特定的模型
- jQuery ajax循环和迭代范围
- 迭代器范围不是本地的
- 如何在 javascript 中迭代选定范围内的每个节点
- JavaScript 范围/代码迭代不同步
- 如何在Java中迭代如下格式的日期范围25-12-2012到31-12-2012(应保留连字符)
- 迭代期间的回调范围
- javascript中使用下划线的延迟范围迭代
- 如何使用Knockout迭代select中的项以显示范围值
- 用3列在谷歌工作表范围内迭代
- 迭代范围的功能性方法(ES6/7)