0

所以我有一个循环，将文本文件中的 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++;
  }
4

4 回答 4

0

我不会使用循环，而是使用 的回调在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();
于 2013-03-15T19:19:57.903 回答
0 
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();
于 2013-03-15T19:09:49.427 回答
0

编辑：我会给你一个很好的 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++;
}
于 2013-03-15T19:10:01.257 回答
0

为什么不在你的 while 循环中添加一个计数器呢？IE

function runTenTimes(){
    var i=0;
    while((there_is_text)&&(i<10){
        do stuff;
        i++;
    }
}
于 2013-03-15T19:10:04.597 回答