需要关于如何'pause'一个while循环

JavaScript Need ideas on how to 'pause' a while loop

本文关键字:一个 while 循环 pause 于如何      更新时间:2023-09-26

我有一个循环,将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++;
  }
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();

编辑:我将给你一个很好的演示如何正确使用异步请求。

来试试这个(它现在是异步的,这样它就不会做你描述的事情了):

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++;
} 

我不会使用循环,而是使用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();

为什么不在while循环中添加计数器呢?例如

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