jquery - for循环中的Ajax请求

Question

这是我的代码：

for (var i = 0; i < 20; i++) {
$.ajax({
    type: "GET",
    async: false,
    url: "/MyController/MyMethod",
    success: function (data) {
        if (i == 0) {
            $('#result_progress').hide();
            $('#result_msg').hide();
            $('#details').show();
        } else if (i == 1) {
            $.ajax({
            type: "GET",
            async: true,
            url: "/Import/Finish",
            success: function (data) {
                    ....                        
            });                                            
        }
        if (i < 2) {
            $('#details').html($('#details').html() + 'someText'));
        }                                        
    }
});

}

我不想使用 async: false 因为我的浏览器停止工作。我将如何以另一种方式解决这个问题？

Answer 1

您的问题是i执行回调时具有循环结束的值。

解决这个问题的标准解决方案是添加一个立即调用的中间函数来保护 的值i：

for (var i = 0; i < 20; i++) {
   (function(i){
      ... your code
   })(i);
}

对该函数的调用会创建一个范围，其中i是一个不同的变量。

Answer 2

我认为你应该做一些封闭：

function makeReq(n){
   return function(){
      $.ajax({
        type: "GET",
        async: true,
        url: "/MyController/MyMethod",
        success: function (data) {
           if (n == 0) {
              $('#result_progress').hide();
              $('#result_msg').hide();
              $('#details').show();
           } else if (n == 1) {
              $.ajax({
                type: "GET",
                async: true,
                url: "/Import/Finish",
                success: function (data) {
                    ....                        
                });                                            
           }
           if (n < 2) {
               $('#details').html($('#details').html() + 'someText'));
           }                                        
       }
     });
   }
}

for (var i = 0; i < 20; i++) {
    makeReq(i);
}

这个问题可以通过创建一个函数并在循环的每次迭代中调用它来解决，同时传递 i; 调用该函数将形成一个全新的执行上下文，其中 i 的值被保留，并且可以在该上下文中以任何方式使用。

Answer 3

这是我修复它的方法：

function run(i, howManyToRun, start) {
    if(i >= howManyToRun) return;

    $.ajax({
        type: "GET",
        async: false,
        url: "/MyController/MyMethod",
        success: function (data) {        
            ....
            run(++i, howManyToRun, start);
            ....                                    
        }
    });
}