如何在 JavaScript 循环中添加延迟？

Posted 2023-02-19

【中文标题】如何在 JavaScript 循环中添加延迟？

【英文标题】：How do I add a delay in a JavaScript loop?

【发布时间】：2011-04-04 18:23:20

【问题描述】：

我想在 while 循环中添加延迟/睡眠：

我试过这样：

alert('hi');

for(var start = 1; start < 10; start++) 
  setTimeout(function () 
    alert('hello');
  , 3000);

只有第一种情况为真：显示alert('hi')后，等待3秒，然后显示alert('hello')，然后alert('hello')不断重复。

我想要的是，在alert('hello') 在alert('hi') 之后显示3 秒之后，它需要等待3 秒第二次alert('hello') 等等。

【问题讨论】：

for(var i=0; i

【参考方案1】：

在我看来，在循环中添加延迟的更简单、最优雅的方法是这样的：

names = ['John', 'Ana', 'Mary'];

names.forEach((name, i) => 
 setTimeout(() => 
  console.log(name);
 , i * 1000);  // one sec interval
);

【参考方案2】：

无功能解决方案

我参加聚会有点晚了，但是有一个不使用任何函数的解决方案：

alert('hi');

for(var start = 1; start < 10; start++) 
  setTimeout(() => alert('hello'), 3000 * start);

【讨论】：

这将以 3 秒为间隔安排 10 个警报，而不是在 alert() 清除后的 3 秒等待时间。如果第一个 alert() 没有在 30 秒内清除，其余的将不会在它们之间暂停。

【参考方案3】：

var loop=(i,time)=>new Promise(r=>
 alert("aaa",i);
 if(i>0)
 setTimeout(()=>
    r([i-1,time]);
 ,time);
).then(v=>loop(v[0],v[1]))

loop(3,1000);

---

试试看

【讨论】：

这需要比“试试看”更好的描述。它也与此线程上的其他帖子非常相似。

【参考方案4】：

const autoPlayer = (arr = [1, 2, 3, 4, 5]) => 
  // Base case:
  if (arr.length < 1) return

  // Remove the first element from the array.
  const item = arr.shift()

  // Set timout 
  setTimeout(() => 
    console.log('Hello, world!', item)  // Visualisation.
    autoPlayer() // Call function again.
  , 1000) // Iterate every second.

嘿，我知道这篇文章很老了，但是这段代码“循环”并使用递归方法为其添加了延迟。我认为您不能“实际上”根据从其他人那里读取各种 cmets 来延迟循环本身的迭代。也许这可以帮助某人！基本上该函数接受一个数组（在本例中）。在每次迭代中，都会调用 setTimeout javascript 方法。当setTimeout 函数的计时器到期时，该函数会无限期地再次调用自身，但在每次调用时，数组都会变小，直到达到基本情况。我希望这可以帮助其他人。