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

Question

我想在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 alert('hi')之后 3 秒显示alert('hello')之后，第二次alert('hello')需要等待 3 秒，依此类推。

Answer 1

setTimeout()函数是非阻塞的，将立即返回。 因此，您的循环将非常快速地迭代，并且它将快速连续地启动 3 秒超时触发器。 这就是为什么您的第一个警报会在 3 秒后弹出，然后所有其他警报都会连续出现，没有任何延迟。

您可能想改用这样的东西：

 var i = 1; // set your counter to 1 function myLoop() { // create a loop function setTimeout(function() { // call a 3s setTimeout when the loop is called console.log('hello'); // your code here i++; // increment the counter if (i < 10) { // if the counter < 10, call the loop function myLoop(); // .. again which will trigger another } // .. setTimeout() }, 3000) } myLoop(); // start the loop

您还可以通过使用自调用函数来整理它，将迭代次数作为参数传递：

 (function myLoop(i) { setTimeout(function() { console.log('hello'); // your code here if (--i) myLoop(i); // decrement i and call myLoop again if i > 0 }, 3000) })(10); // pass the number of iterations as an argument

Answer 2

由于 ES7 有更好的方法来等待循环：

// Returns a Promise that resolves after "ms" Milliseconds
const timer = ms => new Promise(res => setTimeout(res, ms))

async function load () { // We need to wrap the loop into an async function for this to work
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // then the created Promise can be awaited
  }
}

load();

当引擎到达await部分时，它会设置一个超时并停止执行async function 。 然后当超时完成时，执行将在该点继续。 这非常有用，因为您可以延迟 (1) 嵌套循环，(2) 有条件地，(3) 嵌套函数：

 async function task(i) { // 3 await timer(1000); console.log(`Task ${i} done!`); } async function main() { for(let i = 0; i < 100; i+= 10) { for(let j = 0; j < 10; j++) { // 1 if(j % 2) { // 2 await task(i + j); } } } } main(); function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

MDN 上的参考资料

虽然 NodeJS 和现代浏览器现在支持 ES7，但您可能希望使用BabelJS 对其进行转译，以便它可以在任何地方运行。

Answer 3

如果使用 ES6，您可以使用 for 循环来实现：

 for (let i = 1; i < 10; i++) { setTimeout(function timer() { console.log("hello world"); }, i * 3000); }

它为每次迭代声明i ，这意味着超时是 + 1000 之前的值。这样，传递给setTimeout的正是我们想要的。

Answer 4

尝试这样的事情：

 var i = 0, howManyTimes = 10; function f() { console.log("hi"); i++; if (i < howManyTimes) { setTimeout(f, 3000); } } f();

Answer 5

另一种方法是乘以超时时间，但请注意，这不像 sleep 。 循环后的代码会立即执行，只有回调函数的执行被延迟。

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

第一个超时将设置为3000 * 1 ，第二个超时将设置为 3000 3000 * 2 ，依此类推。

Answer 6

这将起作用

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { console.log(i); }, 100 * i);
  })(i);
}

试试这个小提琴： https ://jsfiddle.net/wgdx8zqq/

Answer 7

我认为你需要这样的东西：

var TimedQueue = function(defaultDelay){
    this.queue = [];
    this.index = 0;
    this.defaultDelay = defaultDelay || 3000;
};

TimedQueue.prototype = {
    add: function(fn, delay){
        this.queue.push({
            fn: fn,
            delay: delay
        });
    },
    run: function(index){
        (index || index === 0) && (this.index = index);
        this.next();
    },
    next: function(){
        var self = this
        , i = this.index++
        , at = this.queue[i]
        , next = this.queue[this.index]
        if(!at) return;
        at.fn();
        next && setTimeout(function(){
            self.next();
        }, next.delay||this.defaultDelay);
    },
    reset: function(){
        this.index = 0;
    }
}

测试代码：

var now = +new Date();

var x = new TimedQueue(2000);

x.add(function(){
    console.log('hey');
    console.log(+new Date() - now);
});
x.add(function(){
    console.log('ho');
    console.log(+new Date() - now);
}, 3000);
x.add(function(){
    console.log('bye');
    console.log(+new Date() - now);
});

x.run();

注意：使用警报会停止 javascript 的执行，直到您关闭警报。 它可能比您要求的代码更多，但这是一个强大的可重用解决方案。

Answer 8

我可能会使用setInterval ，如下所示：

var period = 1000; // ms
var endTime = 10000;  // ms
var counter = 0;
var sleepyAlert = setInterval(function(){
    alert('Hello');
    if(counter === endTime){
       clearInterval(sleepyAlert);
    }
    counter += period;
}, period);

Answer 9

您可以创建一个承诺setTimeout的sleep函数。 这使您可以使用async / await编写代码而无需回调和熟悉for循环控制流程。

 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); (async () => { for (let i = 0; i < 10; i++) { console.log(i); await sleep(1000); } console.log("done"); })();

在 Node 中，您可以使用timers/promises来避免 promisification 步骤（如果您的旧 Node 版本不支持该功能，上述代码也可以正常工作）：

const {setTimeout: sleep} = require("timers/promises");

// same code as above

无论如何，由于 JS 是单线程的，所以超时是异步的是一件好事。 否则，浏览器将没有机会重新绘制 UI，从而导致用户界面冻结。

Answer 10

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

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

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

Answer 11

在 ES6 (ECMAScript 2015) 中，您可以使用生成器和间隔进行延迟迭代。

生成器是 ECMAScript 6 的新特性，是可以暂停和恢复的函数。 调用 genFunc 不会执行它。 相反，它返回一个所谓的生成器对象，让我们控制 genFunc 的执行。 genFunc() 最初在其主体的开头暂停。 genObj.next() 方法继续执行 genFunc，直到下一个 yield。 （探索 ES6）

代码示例：

 let arr = [1, 2, 3, 'b']; let genObj = genFunc(); let val = genObj.next(); console.log(val.value); let interval = setInterval(() => { val = genObj.next(); if (val.done) { clearInterval(interval); } else { console.log(val.value); } }, 1000); function* genFunc() { for(let item of arr) { yield item; } }

因此，如果您使用的是 ES6，那是实现延迟循环的最优雅方式（我认为）。

Answer 12

我使用 Bluebird 的Promise.delay和递归来做到这一点。

 function myLoop(i) { return Promise.delay(1000) .then(function() { if (i > 0) { alert('hello'); return myLoop(i -= 1); } }); } myLoop(3);

 <script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.4/bluebird.min.js"></script>

Answer 13

在 ES6 中，您可以执行以下操作：

 for (let i = 0; i <= 10; i++){ setTimeout(function () { console.log(i); }, i*3000) }

在 ES5 中，你可以这样做：

 for (var i = 0; i <= 10; i++){ (function(i) { setTimeout(function () { console.log(i); }, i*3000) })(i); }

原因是， let允许您声明仅限于块语句范围或使用它的表达式的变量，这与var关键字不同，它在全局范围内定义变量，或者在本地定义整个函数而不考虑块范围.

Answer 14

只是想我也会在这里张贴我的两分钱。 这个函数运行一个有延迟的迭代循环。 看到这个 jsfiddle 。 功能如下：

function timeout(range, time, callback){
    var i = range[0];                
    callback(i);
    Loop();
    function Loop(){
        setTimeout(function(){
            i++;
            if (i<range[1]){
                callback(i);
                Loop();
            }
        }, time*1000)
    } 
}

例如：

//This function prints the loop number every second
timeout([0, 5], 1, function(i){
    console.log(i);
});

相当于：

//This function prints the loop number instantly
for (var i = 0; i<5; i++){
    console.log(i);
}

Answer 15

您可以使用 RxJSinterval运算符。 interval每x秒发出一个整数，并且take指定它发出这些数字的次数。

 Rx.Observable .interval(1000) .take(10) .subscribe((x) => console.log(x))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.lite.min.js"></script>

Answer 16

据我所知， setTimeout函数是异步调用的。 您可以做的是将整个循环包装在异步函数中并等待包含 setTimeout 的Promise ，如下所示：

var looper = async function () {
  for (var start = 1; start < 10; start++) {
    await new Promise(function (resolve, reject) {
      setTimeout(function () {
        console.log("iteration: " + start.toString());
        resolve(true);
      }, 1000);
    });
  }
  return true;
}

然后你像这样调用它：

looper().then(function(){
  console.log("DONE!")
});

请花一些时间来很好地理解异步编程。

Answer 17

除了 10 年前公认的答案之外，使用更现代的 Javascript 可以使用async / await / Promise()或生成器函数来实现正确的行为。 （其他答案中建议的不正确行为将设置一系列 3 秒警报，而不管“接受” alert() - 或完成手头的任务）

使用async / await / Promise() ：

 alert('hi'); (async () => { for(let start = 1; start < 10; start++) { await new Promise(resolve => setTimeout(() => { alert('hello'); resolve(); }, 3000)); } })();

使用生成器函数：

 alert('hi'); let func; (func = (function*() { for(let start = 1; start < 10; start++) { yield setTimeout(() => { alert('hello'); func.next(); }, 3000); } })()).next();

Answer 18

无功能的解决方案

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

alert('hi');

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

Answer 19

非常简单的单行解决方案，具有实际的异步等待延迟（没有排队的 setTimeout）：

以下（自执行匿名）函数在循环之间创建一个实际延迟，而不是多个具有不同超时的setTimeout ，这可能会弄乱内存。

• 在 100 个循环中的每一个循环中，它都会await一个new Promise来resolve 。
• 只有在setTimeout在 90 毫秒后“允许”它之后才会发生这种情况。 在此之前，代码会被 async-await / pending Promise阻塞。

 (async () => { for (let i=0; i<100; i++) { await new Promise((resolve) => {setTimeout(() => {document.write(`${i} `); resolve(true)}, 90)}); } })()

Answer 20

 var startIndex = 0; var data = [1, 2, 3]; var timeout = 1000; function functionToRun(i, length) { alert(data[i]); } (function forWithDelay(i, length, fn, delay) { setTimeout(function() { fn(i, length); i++; if (i < length) { forWithDelay(i, length, fn, delay); } }, delay); })(startIndex, data.length, functionToRun, timeout);

Daniel Vassallo 答案的修改版本，将变量提取到参数中以使函数更可重用：

首先让我们定义一些基本变量：

var startIndex = 0;
var data = [1, 2, 3];
var timeout = 3000;

接下来，您应该定义要运行的函数。 如果需要，这将传递 i、循环的当前索引和循环的长度：

function functionToRun(i, length) {
    alert(data[i]);
}

自执行版本

(function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
})(startIndex, data.length, functionToRun, timeout);

功能版

function forWithDelay(i, length, fn, delay) {
   setTimeout(function () {
      fn(i, length);
      i++;
      if (i < length) {
         forWithDelay(i, length, fn, delay); 
      }
  }, delay);
}

forWithDelay(startIndex, data.length, functionToRun, timeout); // Lets run it

Answer 21

试试这个

 var arr = ['A','B','C'];
 (function customLoop (arr, i) {
    setTimeout(function () {
    // Do here what you want to do.......
    console.log(arr[i]);
    if (--i) {                
      customLoop(arr, i); 
    }
  }, 2000);
})(arr, arr.length);

结果

A // after 2s
B // after 2s
C // after 2s

Answer 22

以下是我如何创建一个无限循环，其延迟在特定条件下中断：

  // Now continuously check the app status until it's completed, 
  // failed or times out. The isFinished() will throw exception if
  // there is a failure.
  while (true) {
    let status = await this.api.getStatus(appId);
    if (isFinished(status)) {
      break;
    } else {
      // Delay before running the next loop iteration:
      await new Promise(resolve => setTimeout(resolve, 3000));
    }
  }

这里的关键是创建一个新的通过超时解决的 Promise，并等待它的解决。

显然你需要 async/await 支持。 在节点 8 中工作。

Answer 23

对于常用的“忘记正常循环”并使用“setInterval”的这种组合包括“setTimeOut”：像这样（来自我的实际任务）。

        function iAsk(lvl){
            var i=0;
            var intr =setInterval(function(){ // start the loop 
                i++; // increment it
                if(i>lvl){ // check if the end round reached.
                    clearInterval(intr);
                    return;
                }
                setTimeout(function(){
                    $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
                },50);
                setTimeout(function(){
                     // do another bla bla bla after 100 millisecond.
                    seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                    $("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                    $("#d"+seq[i-1]).prop("src",pGif);
                    var d =document.getElementById('aud');
                    d.play();                   
                },100);
                setTimeout(function(){
                    // keep adding bla bla bla till you done :)
                    $("#d"+seq[i-1]).prop("src",pPng);
                },900);
            },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
        }

PS：了解（setTimeOut）的真实行为：它们都将在同一时间开始“三个bla bla bla将在同一时刻开始倒计时”，因此请设置不同的超时时间来安排执行。

PS 2：计时循环的示例，但是对于反应循环，您可以使用事件，promise async await ..

Answer 24

   let counter =1;
   for(let item in items) {
        counter++;
        setTimeout(()=>{
          //your code
        },counter*5000); //5Sec delay between each iteration
    }

Answer 25

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.
}

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

Answer 26

/* 
  Use Recursive  and setTimeout 
  call below function will run loop loopFunctionNeedCheck until 
  conditionCheckAfterRunFn = true, if conditionCheckAfterRunFn == false : delay 
  reRunAfterMs miliseconds and continue loop
  tested code, thanks
*/

function functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn,
 loopFunctionNeedCheck) {
    loopFunctionNeedCheck();
    var result = conditionCheckAfterRunFn();
    //check after run
    if (!result) {
        setTimeout(function () {
            functionRepeatUntilConditionTrue(reRunAfterMs, conditionCheckAfterRunFn, loopFunctionNeedCheck)
        }, reRunAfterMs);
    }
    else  console.log("completed, thanks");    
            //if you need call a function after completed add code call callback in here
}

//passing-parameters-to-a-callback-function
// From Prototype.js 
if (!Function.prototype.bind) { // check if native implementation available
    Function.prototype.bind = function () {
        var fn = this, args = Array.prototype.slice.call(arguments),
            object = args.shift();
        return function () {
            return fn.apply(object,
              args.concat(Array.prototype.slice.call(arguments)));
        };
    };
}

//test code: 
var result = 0; 
console.log("---> init result is " + result);
var functionNeedRun = function (step) {           
   result+=step;    
       console.log("current result is " + result);  
}
var checkResultFunction = function () {
    return result==100;
}  

//call this function will run loop functionNeedRun and delay 500 miliseconds until result=100    
functionRepeatUntilConditionTrue(500, checkResultFunction , functionNeedRun.bind(null, 5));

//result log from console:
/*
---> init result is 0
current result is 5
undefined
current result is 10
current result is 15
current result is 20
current result is 25
current result is 30
current result is 35
current result is 40
current result is 45
current result is 50
current result is 55
current result is 60
current result is 65
current result is 70
current result is 75
current result is 80
current result is 85
current result is 90
current result is 95
current result is 100
completed, thanks
*/

Answer 27

这是我用于循环数组的函数：

function loopOnArrayWithDelay(theArray, delayAmount, i, theFunction, onComplete){

    if (i < theArray.length && typeof delayAmount == 'number'){

        console.log("i "+i);

        theFunction(theArray[i], i);

        setTimeout(function(){

            loopOnArrayWithDelay(theArray, delayAmount, (i+1), theFunction, onComplete)}, delayAmount);
    }else{

        onComplete(i);
    }
}

你像这样使用它：

loopOnArrayWithDelay(YourArray, 1000, 0, function(e, i){
    //Do something with item
}, function(i){
    //Do something once loop has completed
}

Answer 28

这个脚本适用于大多数事情

function timer(start) {
    setTimeout(function () { //The timer
        alert('hello');
    }, start*3000); //needs the "start*" or else all the timers will run at 3000ms
}

for(var start = 1; start < 10; start++) {
    timer(start);
}

Answer 29

 <!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>

Answer 30

 var timer, i = 10; function myLoop () { // create a loop function timer = setTimeout(function () { document.getElementById("demo").innerHTML = i; i--; if (i >= 0) { myLoop(); } else { clearTimeout(timer); // clear timeout document.getElementById("demo").innerHTML = "DOARRRR .."; } }, 1000); } myLoop(); 

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

Answer 31

尝试这个...

var icount=0;
for (let i in items) {
   icount=icount+1000;
   new beginCount(items[i],icount);
}

function beginCount(item,icount){
  setTimeout(function () {

   new actualFunction(item,icount);

 }, icount);
}

function actualFunction(item,icount){
  //...runs ever 1 second
 console.log(icount);
}

Answer 32

你来弄吧：

 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>

Answer 33

var count = 0;

//Parameters:
//  array: []
//  fnc: function (the business logic in form of function-,what you want to execute)
//  delay: milisecond  

function delayLoop(array,fnc,delay){
    if(!array || array.legth == 0)return false;
    setTimeout(function(data){ 
        var data = array[count++];
        fnc && fnc(data);
        //recursion...
        if(count < array.length)
            delayLoop(array,fnc,delay);
        else count = 0;     
    },delay);
}

Answer 34

只要循环运行，每两秒显示一段文本的简单实现。

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

Answer 35

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);

---

试试看

Answer 36

尝试这个

//the code will execute in 1 3 5 7 9 seconds later
function exec(){
  for(var i=0;i<5;i++){
   setTimeout(function(){
     console.log(new Date());   //It's you code
   },(i+i+1)*1000);
  }
}