Question

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

以下是fiddle

编辑：

我选择了 @Tushar Gupta 解决方案，因为它最适合我的需求，但是我遇到了另一个问题，如果我设置了这个选项，迭代将无效： processData：false

请参阅fiddle

为什么这不起作用？

Answer 1

这是由于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); 
}

Answer 2

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

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

Answer 4

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

jQuery ajax循环和迭代范围

4 个答案: