如何使用 JQuery 添加延迟?(让它等待 5 秒再继续）

How to add a delay with JQuery? (make it wait 5s before continue)

本文关键字：等待 再继续 JQuery 何使用 添加 延迟      更新时间：2023-09-26

>是具体的：

  • 我有一个代码需要在 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++;放在 wait5s（） 中的设置超时中...但是浏览器停止响应！:(

我希望每个警报之间有 5 秒的延迟！

那么，我做错了什么？：''提前致谢;)

>setTimeout是一个异步函数，不会阻止您的wait5s方法调用。因此，您最终会一个接一个地设置 5 次超时，这会将警报调用函数放入超时队列中，以便在 5 秒后立即一个接一个地调用。

您需要的是，在调用第一个超时函数后调用下一个 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);
}

  1. 你需要在setTimeout的函数中加入x，以便每5秒触发一次x++。

  2. 你在 x 为 5 之前连续调用 wait5s() ;。连续调用它会启动 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);

这些是它没有按照您期望的方式工作的原因。

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

问题是这段代码：

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

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

下面是一个在上一次迭代完成时为下一次迭代调用 setTimeout() 的方法：

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

下面是一个使用变量 setTimeout 的方法：

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

你可以试试这个，如果第一次调用应该在 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++;
    }
}

看来你真的在寻找setInterval而不是setTimeout.

 function myAlert() {
     alert('Next alert in 5 secs');
 }
 var si = setInterval(myAlert, 5000)

使用 clearInterval 停止计时器。

您同时调用 5alerts，请尝试此代码

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() } 
}
相关文章：