JavaScript，如何在 for 循环中添加超时？答案

【问题标题】：JavaScript, How to add timeout inside the for loop?JavaScript，如何在 for 循环中添加超时？
【发布时间】：2021-04-25 13:45:06
【问题描述】：

这是原始代码。

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 项。

请帮帮我..

【问题讨论】：

标签： javascript for-loop settimeout

【解决方案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);
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

 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 时，浏览器中的计时器线程开始倒计时，当时间到时将回调函数放入 javascript 线程的执行堆栈中。在堆栈中它上面的其他函数完成之前，不会执行回调函数。所以在这种情况下，forloop 先执行，然后设置的超时时间开始执行。

所以我放了一些延迟并与元素相乘，这样当它在循环中执行时，它只会一个接一个地增加延迟值。

【讨论】：

您好，欢迎来到 SO！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。请阅读tour和How do I write a good answer?

【解决方案4】：

在我的版本中，我首先创建了 id-array arr 的洗牌版本 (vis)。然后我.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>

进一步说明：函数showdivs() 是一个生成器函数，它创建一个范围来设置洗牌数组vis，然后返回在控制下重复调用的实际函数setInterval().

【讨论】：