Question

具体：

我有一段需要在5秒后运行的代码
该代码在函数
该函数被setTimeout（）

在第一次运行时会发生什么......但是在下次运行时它不会等待那5秒！

代码如下所示：

//==================== create variables: ====================

var x = 0;

//==================== create functions: ====================

function wait5s() {
    setTimeout(function() {
        alert("alert # " + x + "\nNext alert will pop up in 5 seconds now!");
    }, 5000);
    x++;
}

function repeat5times(){
    while (x<5) {
    wait5s()
    }
}


//==================== run this: ====================

alert("Click Ok and Wait 10 seconds for next alert!");
setTimeout(function() {
    repeat5times();
}, 5000);

这段代码不是我原来的代码，但问题是一样的： - 在警报弹出之前，x增加到5！然后他们一个接一个地弹出！我试图把x++;放在setTimeout里面的wait5s（）......但浏览器停止响应！：（

我想在每个警报之间延迟5秒！

所以，我做错了什么？：\ 提前谢谢;）

Answer 1

setTimeout是一个异步函数，它不会阻止你的wait5s方法调用。因此，你可以一个接一个地设置超时5次，将警报调用函数置于超时队列中，并在5秒后立即调用。

你需要的是，在调用第一个超时函数后调用next wait5s。

function wait5s(callback) {
    setTimeout(function () {

        alert("alert # " + x + "\nNext alert will pop up in 5 seconds now!");

        x++;
        if(callback){
            callback();
        }

    }, 5000);
}

function repeat5times() {

    var callback = function () {
        if (x < 5) {
            wait5s(callback);
        }
    };

    wait5s(callback);
}

Answer 2

您需要在setTimeout的函数中包含x，以便每隔5秒触发一次x ++。
您正在呼叫wait5s();在x为5之前连续不断地调用它会启动5个setTimeOut函数，这就是为什么5秒后它们会一个接一个地弹出：
```
while (x<5) {
   wait5s()
}
```

就像有：

   setTimeout(function() { alert("go after 5sec");}, 5000);
   setTimeout(function() { alert("go after 5sec");}, 5000);
   setTimeout(function() { alert("go after 5sec");}, 5000);
   setTimeout(function() { alert("go after 5sec");}, 5000);
   setTimeout(function() { alert("go after 5sec");}, 5000);

这就是为什么它没有像你期望的那样工作的原因。

一种解决方案是在wait5s();函数内的if语句中使用setTimeout。

Answer 3

问题是这段代码：

function repeat5times(){
    while (x<5) {
        wait5s()
    }
}

只需同时设置5个setTimeouts。如果您希望它每5秒运行5次，那么您需要以不同的方式对其进行编码。您可以使用setInterval()或在第一个setTimeout()触发时设置新setTimeout()，也可以设置5个超时，每个时间间隔不同。

这是一个方法，在前一个迭代结束时调用function repeat5times() { var cntr = 0; function run() { if (cntr < 5) { setTimeout(function() { ++cntr; console.log("alert # " + x + "\nNext alert will pop up in 5 seconds now!"); run(); }, 5000); } } run(); }进行下一次迭代：

setInterval

以下是使用function repeat5times() { var cntr = 0; var timer = setInterval(function() { console.log("alert # " + x + "\nNext alert will pop up in 5 seconds now!"); ++cntr; if (cntr >= 5) { clearInterval(timer); } }, 5000); }的另一种方法：

function waitNs(sec) {
    setTimeout(function() {
        console.log("alert # " + x + "\nNext alert will pop up in 5 seconds now!");
    }, sec * 1000);
}

function repeat5times() {
    for (var i = 1; i <= 5; i++) {
        waitNs(i * 5);
    }
}

这是一个使用变量setTimeouts的方法：

{{1}}

Answer 4

您正在同时调用5个字符，请尝试此代码

var x = 0;
var t=0;

//==================== create functions: ====================

function wait5s() { 
   t+=5000;
    setTimeout(function() { 
         alert("alert # " + x + "\nNext alert will pop up in 5 seconds now!");
     },t);
   x++;
}

function repeat5times(){ 
while (x<5) { wait5s() } 
}

Answer 5

如果第一次调用应该在5秒后执行，你可以用简单的术语试试这个，所以对于第二次函数调用，它需要在10秒后执行。类似的第三个应该在15秒后

//==================== create variables: ====================

var x = 1;

//==================== create functions: ====================

function wait5s(myVariable) {
    setTimeout(function() {
        alert("alert # " + x + "\nNext alert will pop up in 5 seconds now!");
    }, myVariable * 5000);

}

function repeat5times(){
    while (x<=5) {
       wait5s(x)
       x++;
    }
}

Answer 6

您似乎真的在寻找setInterval而不是setTimeout。

 function myAlert() {
     alert('Next alert in 5 secs');
 }

 var si = setInterval(myAlert, 5000)

使用clearInterval停止计时器。

如何使用JQuery添加延迟？（让它在继续之前等待5s）

6 个答案:

如何使用JQuery添加延迟？ （让它在继续之前等待5s）

6 个答案:

如何使用JQuery添加延迟？（让它在继续之前等待5s）