JavaScript需要關於如何'暫停'一個while循環的想法

Question

所以我有一個循環，顯示從一個文本文件到一個頁面的HTML表，並且它這樣做，直到它已經使用了所有可用的匹配行的txt文件從我已經在代碼的另一部分中預先確定的數組中。

唯一的問題是，當循環正在進行，並且所有表正在加載時，頁面就會坐在那裏，看起來空白。加載可能需要很長時間，特別是在緩慢的互聯網上。我需要一次加載大約10個表格，然後在頁面底部有一個按鈕「點擊此處顯示更多結果」，導致加載10個表格，直到所有可用表格都是用過的。

我該怎麼辦？我試過把循環放入循環中，並使用一堆複雜的if語句，但都無濟於事。

這裏是循環：

arrayFinal[arrayln2]="end"; 
    var displayNumber=0; 
    while(arrayFinal[displayNumber].charAt(0) != "e"){ 
    var boxPath="camper_htmls/"+arrayFinal[displayNumber]+".txt"; 
    boxhttp = new XMLHttpRequest(); 
    boxhttp.open("GET",boxPath,false); 
    boxhttp.send(null); 
    var boxHTML = boxhttp.responseText; 
    var setDivId=document.createAttribute("id"); 
    setDivId.value=("div_"+displayNumber); 
    var node = document.createElement("div"); 
    node.setAttributeNode(setDivId); 
    document.getElementById("resultContainer").appendChild(node); 
    var divIdNumber = ("div_"+displayNumber); 
    document.getElementById(divIdNumber).innerHTML=boxHTML; 
    displayNumber++; 
    } 

Answer 1

The `setTimeout()` 

    var i = 1;      // set your counter to 1 

    function myLoop() {   // create a loop function 
     setTimeout(function() { // call a 3s setTimeout when the loop is called 
      alert('hello');   // your code here 
var boxPath="camper_htmls/"+arrayFinal[displayNumber]+".txt"; 
boxhttp = new XMLHttpRequest(); 
boxhttp.open("GET",boxPath,false); 
boxhttp.send(null); 
var boxHTML = boxhttp.responseText; 
var setDivId=document.createAttribute("id"); 
setDivId.value=("div_"+displayNumber); 
var node = document.createElement("div"); 
node.setAttributeNode(setDivId); 
document.getElementById("resultContainer").appendChild(node); 
var divIdNumber = ("div_"+displayNumber); 
document.getElementById(divIdNumber).innerHTML=boxHTML; 
displayNumber++; 
    enter code here 
      i++;      // increment the counter 
      if (i < 10) {   // if the counter < 10, call the loop function 
      myLoop();    // .. again which will trigger another 
      }      // .. setTimeout() 
     }, 3000) 
    } 

    myLoop(); 

Answer 2

編輯：我想給你一個很好的jsfiddle展示如何正確使用異步請求。

這裏試試這個（它現在是異步的，這樣，它不會做你描述）：

arrayFinal[arrayln2]="end"; 
var displayNumber=0; 
while(arrayFinal[displayNumber].charAt(0) != "e"){ 
var boxPath="camper_htmls/"+arrayFinal[displayNumber]+".txt"; 
boxhttp = new XMLHttpRequest(); 
boxhttp.open("GET",boxPath,true); 
boxhttp.send(null); 
var boxHTML = boxhttp.responseText; 
var setDivId=document.createAttribute("id"); 
setDivId.value=("div_"+displayNumber); 
var node = document.createElement("div"); 
node.setAttributeNode(setDivId); 
document.getElementById("resultContainer").appendChild(node); 
var divIdNumber = ("div_"+displayNumber); 
document.getElementById(divIdNumber).innerHTML=boxHTML; 
displayNumber++; 
} 

Answer 3

爲什麼不加一個計數器來while循環？即

function runTenTimes(){ 
    var i=0; 
    while((there_is_text)&&(i<10){ 
     do stuff; 
     i++; 
    } 
} 

Answer 4

我不會用循環，而是使用XMLHttpRequest的回調請求下一個項目時，一個結束

arrayFinal[arrayln2]="end"; 
var displayNumber=0; 
function callback(){ 
    if((arrayFinal[displayNumber].charAt(0) != "e"){ 
     var boxPath="camper_htmls/"+arrayFinal[displayNumber]+".txt"; 
     boxhttp = new XMLHttpRequest(); 
     boxhttp.open("GET",boxPath,true); 
     boxhttp.onreadystatechange(function(){ 
      var boxHTML = boxhttp.responseText; 
      var setDivId=document.createAttribute("id"); 
      setDivId.value=("div_"+displayNumber); 
      var node = document.createElement("div"); 
      node.setAttributeNode(setDivId); 
      document.getElementById("resultContainer").appendChild(node); 
      var divIdNumber = ("div_"+displayNumber); 
      document.getElementById(divIdNumber).innerHTML=boxHTML; 
      callback(); 
     }); 
     displayNumber++; 
     boxhttp.send(null);    
    } 
} 
callback();