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

Question

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

501

我想在一个while循环内添加延迟/休眠：

我尝试像这样实现：

alert('hi');

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

只有第一种情况是正确的：显示 alert('hi') 后，它将等待3秒钟，然后显示 alert('hello')，但随后 alert('hello') 将不断地重复显示。

我希望的是，在显示 alert('hi') 之后3秒钟后显示 alert('hello')，然后再等待3秒钟显示第二次 alert('hello')，以此类推。

- olidev

for(var i=0; i < 5; i++){ delayLoop(i) }; function delayLoop(i){ setTimeout(function(){ console.log('每隔1秒打印一次', (i*1000)) } } - mhndlsz

在每个循环中设置不同值的超时可能不是一个好主意。以下是一种使用Promise（async / await）实际上通过无限期挂起代码执行的无聊单行程序：https://dev59.com/DHA65IYBdhLWcg3w4C0L#73588338 - marko-36

33个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nguyen Ba Danh - FAIC HN · Answer 1

你来做：

console.log('hi')
let start = 1
setTimeout(function(){
  let interval = setInterval(function(){
    if(start == 10) clearInterval(interval)
    start++
    console.log('hello')
  }, 3000)
}, 3000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- Boginaathan M · Answer 2

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
    for(var i=0; i<5; i++) {
     var sno = i+1;
        (function myLoop (i) {          
             setTimeout(function () {   
              alert(i); // Do your function here 
             }, 1000*i);
        })(sno);
    }
}
</script>

</body>
</html>

- squeekyDave · Answer 3

简单实现方式是在循环运行时每两秒钟显示一段文本。

for (var i = 0; i < foo.length; i++) {
   setInterval(function(){ 
     console.log("I will appear every 2 seconds"); 
   }, 2000);
  break;
};