暫停循環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); 

注意，如果前一個失敗，這將不會發送一個請求。