jQuery ajax循环和迭代范围

我想知道为什么在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

看小提琴

为什么这不起作用？

Answer 1

小提琴演示

 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(); 

Answer 2

这是由于JavaScript中的Closures。 这是修复 –

 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); } 

Answer 3

你可以使用闭包修复它，包装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); } 

Answer 4

使用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); }