JS for和while循環與jQuery ajax在Chrome中鎖定

我有一個朋友想要將數據從一個數據庫增量移動到另一個數據庫，並在此過程中顯示錯誤。我覺得我可以通過爲他編寫一個快速腳本來幫忙，並且我在大約一個小時內完成了它，並且在Opera和Firefox（使用蜻蜓和螢火蟲進行測試）中運行良好。當他在Chrome中試用時，瀏覽器被鎖定，直到for或while循環完成，並且花費相當長的時間才能完成。這裏是我的代碼（不讀取json的錯誤扣部分）：JS for和while循環與jQuery ajax在Chrome中鎖定

jQuery.noConflict(); 
jQuery('#myForm').submit(function(form) { 
    form.preventDefault(); 
    var increment = (jQuery("input#increment").val())*1; 
    var total = jQuery("input#total").val(); 
    var progress = 0; 
    jQuery("#progressbar").progressbar({value: 0}); 
    //for (progress = 0; progress < total; progress = progress + increment) 
    while (progress < total) 
    { 
     jQuery.ajax({ 
      url: 'progressBarAjax.php', 
      type: "POST", 
      async: false, 
      dataType: "json", 
      data: { 
       ajax: 'goAjax', 
       total: total, 
       increment: increment, 
       progress: progress 
      }, 
      success: function(data){ 
       jQuery("#progressbar").progressbar({value: data.value}); 
      } 
     }); 
     progress = progress + increment; 
    } 
});

也，以備將來參考，用於捕捉錯誤的代碼已經在調試和data.value =地板（（$進步剝離/ $ total）* 100）。你也可以看到我曾經嘗試過的地方，並且都可以在Opera和Firefox中正常工作，但不能在Chrome中正常工作。

知道爲什麼發生這種行爲將很高興知道未來的項目，但我也想寫得很好。目標是花費20萬次插入/更新，並將它們分解爲更小的塊，同步運行查詢，並更新進程中的進度條。

來源

2012-01-20 dasper

進度條是否在Chrome上以適當的時間間隔更新？ – MyStream

如果我將alert（）放在中間，但瀏覽器在while循環結束之前無響應，進度條會更新。增量是表單中傳遞的任何內容。因此，如果您可以使總數爲500並增加100，您應該看到進度條每次更新5次，每次20％。適用於FF和Opera，不適用於Chrome。 – dasper

所以你要求瀏覽器執行'總計'儘可能快？你可能只需要錯開或定時你的獲取，所以它不會壓倒瀏覽器。 – Fresheyeball

那麼，你使用的是async:false，所以瀏覽器會在請求發生時鎖定。如果增量爲0，那麼while也可以進入無限循環。

我想你實際上是想查詢服務器，，直到它說出來。喜歡的東西：

var increment, total, progress; 

function getProgress(){ 
    jQuery.ajax({ 
     url: 'progressBarAjax.php', 
     type: "POST", 
     async: true, 
     dataType: "json", 
     data: { 
      ajax: 'goAjax', 
      total: total,   // Obviously, I don't know what these 
      increment: increment, // do on your server, so I've kept 
      progress: progress  // them here. 
     }, 
     success: function(data){ 
      // Assuming data.value is the progress from 1-100? 
      // otherwise, figure out the progress from the data response 
      progress = data.value; 
      jQuery("#progressbar").progressbar({value: progress}); 
      if(progress < 100){ 
       getProgress(); 
      }else{ 
       // All done 
       alert('done'); 
      } 
     } 
    }); 
} 

jQuery('#myForm').submit(function(form) { 
    form.preventDefault(); 
    // Only go if we aren't currently. 
    if(progress == null || progress == 100){ 
     increment = (jQuery("input#increment").val())*1; 
     total = jQuery("input#total").val(); 
     progress = 0; 
     getProgress(); 
    } 
});

來源

2012-01-20 02:07:31 rgthree

謝謝，我會盡力併發揮它的作用。 FYI，增量和進度是限制和抵消在MySQL。總數是我們想要的總記錄。 php頁面上的功能將比所示功能更多地處理，但我想盡可能簡化示例，因爲我可以簡單地指出造成問題的原因。 – dasper

瀏覽器鎖定了是，如果你正在執行同步AJAX請求，特別是如果你在序列進行幾個他們的預期行爲。

從jQuery doc：

異步布爾

默認：true

默認情況下，所有的請求都發送異步（即這是默認設置爲true）。如果您需要同步請求，請將此選項設置爲false。跨域請求和dataType：「jsonp」請求不支持同步操作。請注意，同步請求可能會暫時鎖定瀏覽器，並在請求處於活動狀態時禁用任何操作。

由於行爲在瀏覽器中的行爲不一致，文檔可能會讀取「可能」。如果您想強制頁面重繪，則必須允許JavaScript執行週期性終止。爲了達到這個目的，不要使用while循環，而是調用「嵌套的」setTimeout()或使用異步請求，並調用上一個請求的回調中的下一個請求。

來源

2012-01-20 02:09:01 cheeken

JS for和while循環與jQuery ajax在Chrome中鎖定

回答

相關問題