暂停循环jQuery问题

Question

我有一个问题与JavaScript/jQuery ...我有一个Web服务，将处理来自客户端列表中的信息。我想要做的是让客户端一块一块地发送数据，以便Web服务在不超载的情况下完成工作。此外，我正在使用jQuery UI进度条，它将允许用户查看其请求的进度。

我的问题是，我使用一个for循环，循环运行时，它似乎环路，所以如果有10个数据的过程中，同时在所有10次运行运行至完成...

什么我问有没有办法让for循环暂停，直到从服务器收到成功消息？

这是我的尝试：

var nums = [1,2,3,4,5,6,7,8,9,10]; 

     for (var i in nums) { 

     //I also tried 
     //for (num = 1; num <= 9; num++) { 

      //start loop 
      $("#progressbar").progressbar('option', 'value', num); 
      var input = { 
       "num": num, 
       "total": 100 
      } 

      // .progressbar('option', 'value', 37);    
      var jsonStr = JSON.stringify(input); 
      //d = '{' + d + '}'; 
      $.ajax({ 
       type: "POST", 
       url: "AjaxWcf.svc/TestModal", 
       contentType: "application/json; charset=utf-8", 
       data: jsonStr, 
       dataType: "json", 
       success: function(msg) { 
        $("#progressbar").progressbar({ 
         value: num 
        }); 

        //alert(msg.d); 
        //     jQuery('#modalContentTest.loading').fadeOut(200); 
        //     setTimeout('jQuery.modal.close()', 1000); 

        $("#message").value = msg; 
       }, 
       error: AjaxFailed 
      }); 
     } 

     function AjaxFailed(result) { 
      alert(result.status + ' ' + result.statusText); 
     } 
    }); 

我知道它的晚，所以也许我斗鸡眼也许有些睡眠会帮助我从一个不同的角度看到这一点，buuuuuttt如果有人可以用这个或显示帮助我是一个配角，我会很感激。

谢谢！

Answer 1

你会想从你的回调中缓存，以便它调用序列中的下一个（如果存在）。

var processArrayAsync = function(array) { 
    // Define the iteration handler as a static property to avoid the 
    // overhead of its creation for mulitple calls to processArrayAsync. 
    // If you'll only be using this method once or twice, then this 
    // technique isn't necessary 
    if (!processArrayAsync.step) { 
     processArrayAsync.step = function(i) { 
      if (!array[i]) { return; } 

      $("#progressbar").progressbar('option', 'value', array[i]);     
      $.ajax({ 
       type: "POST", 
       url: "AjaxWcf.svc/TestModal", 
       contentType: "application/json; charset=utf-8", 
       data: { 
        "num": array[i], 
        "total": 100 
       }, 
       dataType: "json", 
       success: function(msg) { 
        $("#progressbar").progressbar({value: array[i]}); 
        $("#message").value = msg;        
        // After the callback has completed, process the next 
        // element in the array 
        processArrayAsync.step(i+1); 
       }, 
       error: function(msg) { 
        AjaxFailed(msg); 
        // You may want to stop processing if one request 
        // fails, if so, just change this back to 
        // `error: AjaxFailed` 
        processArrayAsync.step(i+1); 
       } 
      }); 
     }; 
    } 

    processArrayAsync.step(0); 
}; 

var nums = [1,2,3,4,5,6,7,8,9,10]; 
processArrayAsync(nums); 

Answer 2

您的问题是AJAX调用是异步的，这意味着该行$.ajax(...)将马上返回，而不等待服务器接收请求和发送响应。

虽然可以发送同步请求，但不应该这样做，因为它会在请求完成之前完全冻结浏览器。 （使用Javascript 总是浏览器的UI线程上运行）

您需要在success回调发送每个请求从先前的请求。

例如：

function sendPart(num) { 
     $("#progressbar").progressbar('option', 'value', num); 
     var input = { 
      num: num, 
      total: 100 
     }; 

     var jsonStr = JSON.stringify(input); 

     $.ajax({ 
      type: "POST", 
      url: "AjaxWcf.svc/TestModal", 
      contentType: "application/json; charset=utf-8", 
      data: jsonStr, 
      dataType: "json", 
      success: function(msg) { 
       $("#message").value = msg; 

       if (num < 10) 
        sendPart(num + 1); 
      }, 
      error: AjaxFailed 
     }); 
    } 
} 

sendPart(1); 

注意，如果前一个失败，这将不会发送一个请求。