在for循環中設置間隔以顯示結果

Question

嘿傢伙我是一個noobie與JavaScript和我一直在搞亂它，我想知道是否有任何控制事件的機會導致例如像輸出「for循環」，這裏就是我的了：

var stuff= ["cat","dog","parrot","wolf"]; 
var output = ""; 
for(var i = 0; i < stuff.length; i++){ 
    output += stuff[i] + "</br>"; 
} 

document.getElementById("result").innerHTML = output; 

它將輸出在我的DIV「結果」：

cat 
dog 
parrot 
wolf 

我一直在努力做是在每個輸出之間設置1秒的時間間隔......所以貓先出現然後第二次出現在狗等等之後......這是可能的嗎？在此先感謝

Answer 1

是的，這是可能的，你使用的setTimeout（function_to_call，1000）;

在你的循環，可以在每次迭代使用的setTimeout但時間正在增加，因爲我是爲了增加對內容附加到#result每個第二：

var stuff= ["cat","dog","parrot","wolf"]; 
 
    
 
    for(var i = 0; i < stuff.length; i++) 
 
    { 
 
     var func = function(index) 
 
     { 
 
     setTimeout(function() 
 
     { 
 
      document.getElementById("result").innerHTML += stuff[index] + "<br/>"; 
 
     }, 1000*index); 
 
     } 
 
     func(i); 
 
    }

<p id="result"></p>

var func = function(index) 
    { 
    setTimeout(function() 
    { 
     document.getElementById("result").innerHTML = document.getElementById("result").innerHTML + stuff[index] + "<br/>"; 
    }, 1000*index); 
    } 
    func(i); 
} 

Answer 2

是的。這是可能..

隨着setInterval（有在beggining 1周秒鐘的延遲，其可以在需要時固定）

var stuff= ["cat","dog","parrot","wolf"]; 
 
var output = ""; 
 
var i = 0; 
 
var interval = setInterval(function(){ 
 
    output += stuff[i] + "</br>"; 
 
    document.getElementById("result").innerHTML = output; 
 
    i++; 
 
    if (i==stuff.length){ 
 
     clearInterval(interval); 
 
    } 
 
},1000);

<div id="result"></div>

---

OR

您可以使用setTimeout函數的循環。

var stuff= ["cat","dog","parrot","wolf"]; 
 
var output = ""; 
 
for(var i = 0; i < stuff.length; i++){ 
 
    (function(i){ 
 
     setTimeout(function(){ 
 
      output += stuff[i] + "</br>"; 
 
      document.getElementById("result").innerHTML = output; 
 
     },1000*i); 
 
    })(i); 
 
}

<div id="result"></div>

Answer 3

使用setInverval()。

var stuff = ["cat", "dog", "parrot", "wolf"], 
 
    i = 0; 
 

 
var timer = setInterval(function() { 
 
    if (i < stuff.length) { 
 
    document.getElementById("result").appendChild(document.createTextNode(stuff[i])); 
 
    document.getElementById("result").appendChild(document.createElement('br')); 
 
    i++; 
 
    } else { 
 
    clearTimeout(timer); 
 
    } 
 
}, 1000);

<div id="result"></div>

Answer 4

Absolutlely，有幾個選項會根據您的需求：

對於示例情況下，最簡單的方法是使用window.setInterval：

var stuff= ["cat","dog","parrot","wolf"]; 
 
var interval=window.setInterval(reportContent,1000); 
 

 
function reportContent(){ 
 
    output=stuff.shift(); 
 
    document.getElementById("result").innerHTML += output+'<br/>'; 
 
    if(stuff.length<1) window.clearInterval(interval); 
 
}

<div id="result"></div>

window.setTimeout將允許您控制每個間隔，如果您需要精細控制，那麼這個間隔很好。如果您需要暫停，例如您可以使用window.clearTimeout，向您發送window.setTimeout呼叫的結果。這也可以讓你啓用永遠不會有2次超時運行。

var stuff= ["cat","dog","parrot","wolf"]; 
 
var timeout=0; 
 

 
function reportContent(){ 
 
    if(timeout>0) window.clearTimeout(timeout); 
 
    output=stuff.shift(); 
 
    document.getElementById("result").innerHTML += output+'<br/>'; 
 
    if(stuff.length>0) timeout=window.setTimeout(reportContent,1000); 
 
} 
 
reportContent();

<div id="result"></div>

Answer 5

雖然JavaScript有沒有暫停功能本身，你可以在給定時間後ammount的調用函數。這是設置setTimeout函數。你可以做這樣的事情：

function printItemsToDiv(stuff, index) 
 
{ 
 
    var output = ""; 
 

 
    for(var i = 0; i < stuff.length && i < index; i++){ 
 
    output += stuff[i] + "</br>"; 
 
    } 
 

 
    document.getElementById("result").innerHTML = output; 
 

 
    if(index < stuff.length) { 
 
    setTimeout(function() { printItemsToDiv(stuff, index + 1); }, 1000); 
 
    } 
 
} 
 

 
var stuff = ["cat","dog","parrot","wolf"]; 
 
printItemsToDiv(stuff, 1);

<div id="result"></div>