JavaScript，如何在 for 循環中添加超時？

Question

這是原始代碼。

var randomNumber = [1, 2, 3, 4];

var currentNumber = randomNumber.length

for (i=0; i < currentNumber; i++) {

$("#"+randomNumber[i]).fadeIn(100).fadeOut(100).fadeIn(100);

}

我想每 1 秒獲取一次每個 randomNumber 項目。

請幫我..

Answer 1

const randomNumber = [1, 2, 3, 4];
const currentNumber = randomNumber.length;

for (let i=0; i < currentNumber; i++) {
  setTimeout(() => {
    const random = Math.floor(Math.random() * randomNumber.length);
    $("#" + random).fadeIn(100).fadeOut(100).fadeIn(100);
  }, 1000);
}

Answer 2

 const randomNumber = [1, 2, 3, 4]; setInterval(() => { const randomElement = randomNumber[Math.floor(Math.random() * randomNumber.length)]; console.log(randomElement); }, 1000);

Answer 3

在我的版本中，我首先創建了 id-array arr的洗牌版本（ vis ）。 然后，每次間隔 function 被觸發時，我.pop()都會從中獲取一個 id。 當vis中沒有更多可用的 id 時，間隔將被清除。

 function shfl(arr) { let a=[...arr];   for (var j,i = a.length - 1; i > 0; i--) {  j = Math.floor(Math.random() * (i+1)); [a[i],a[j]]=[a[j],a[i]]; } return a; } const arr=["a1","a2","a3","a4"]; function showdivs(ar){ var vis=shfl(ar); return function(){ if (vis.length) document.getElementById(vis.pop()).style.visibility="visible"; else clearInterval(hndl); } } const hndl=setInterval(showdivs(arr),1000);

 #cont div { visibility: hidden }

 <div id="cont"> <div id="a1">one</div> <div id="a2">two</div> <div id="a3">three</div> <div id="a4">four</div> </div>

One further remark: the function showdivs() is a generator function that creates a scope for setting up the shuffled array vis and then returns the actual function that is called repeatedly under the control of setInterval() .

Answer 4

 const randomNumber = [1, 2, 3, 4];

for (i=0; i < randomNumber.length; i++) {
    setTimeout(function() {
      $("#" + randomNumber[i]).fadeIn(100).fadeOut(100).fadeIn(100);
    }, i * 1000);
  }

當調用 setTimeout 或 setInterval 時，瀏覽器中的計時器線程開始倒計時，當時間到時，將回調 function 放入 javascript 線程的執行堆棧中。 回調 function 在堆棧中高於它的其他函數完成之前不會執行。 所以在這種情況下，forloop首先執行，然后設置的超時開始執行。

所以我放了一些延遲並與元素相乘，這樣當它在循環中執行時，它只會一個接一個地增加延遲值。