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

EDIT：非同期リクエストを適切に使用する方法を示す素敵な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 ループにカウンターを追加してみませんか? すなわち

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