-1

具体：

  • 我有一个需要在 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 秒的延迟！

那么，我做错了什么？：\ 提前致谢 ;）

4

6 回答 6

3

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);
}
于 2013-11-10T18:04:34.883 回答
2

  1. 您需要将 x 放在setTimeout's 函数中，以便每 5 秒触发一次 x++。

  2. 你在打电话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);

这就是为什么它没有按照您预期的方式工作的原因。

一种解决方案是在's 函数wait5s();中包含 if 语句。setTimeout

于 2013-11-10T18:22:11.807 回答
1

问题是这段代码：

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

只需同时设置 5 个 setTimeouts。如果您希望它每 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);
}

这是使用变量 setTimeouts 的方法：

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);
    }
}
于 2013-11-10T18:04:16.683 回答
0

您同时调用 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() } 
}
于 2013-11-10T18:06:45.420 回答
0

你可以试试这个，简单来说，如果第一次调用应该在 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++;
    }
}
于 2013-11-10T18:09:20.043 回答
0

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

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

 var si = setInterval(myAlert, 5000)

用于clearInterval停止计时器。

于 2013-11-10T18:10:43.300 回答