调用已分配了SetTimeout的JavaScript函数

Question

我不确定100％如何在JavaScript中使用setTimeout。 说我有这样的事情：

$(document).ready(function() {           
    testTimeout();        
});

function testTimeout() {
    alert("testing timeout");
    setTimeout(testTimeout, 5000);
}

页面准备好后，这将每5个显示一个弹出窗口。 如果我随后通过单击按钮调用testTimeout，会发生什么情况？

$("#button").click(function() {        
    testTimeout();
}); 

该按钮是否会单击调用testTimeout并每5秒添加另一个超时？ 还是单击按钮会重置从按下按钮起的超时时间？ 我问的原因是因为我想设计类似这样的东西，以便可以向超时函数传递参数。 网页启动时，我有一个默认参数。 但是，如果我按下一个按钮，我希望立即使用新参数在每隔5秒调用一次超时功能。 但是，我不希望带有旧参数的超时功能继续重复。 我该如何实现？ 任何帮助和理解将不胜感激。

Answer 1

页面准备好后，这将每5个显示一个弹出窗口。

不，不是这样，它将无延迟地重复显示警报和/或引起“太多递归”错误，因为setTimeout(testTimeout(), 5000) 调用 testTimeout并将其返回值传递给setTimeout ，就像foo(bar()) 调用 bar并将其返回值传递给foo 。

如果删除() ：

function testTimeout() {
    alert("testing timeout");
    setTimeout(testTimeout, 5000);
    // here --------------^
}

然后它将做到这一点。

如果我随后通过单击按钮调用testTimeout，会发生什么情况？

最终，该函数被调用两次（每5秒不止一次），因为每次调用该函数时，它都会自己重新计划。 第三次会使其更频繁（3次/秒），依此类推。

---

如果要避免这种情况，一种选择是记住计时器句柄，如果在此之前调用该函数，则取消所有未完成的定时回调：

var handle = 0;
function testTimeout() {
    clearTimeout(handle); // Clears the timed call if we're being called beforehand
    alert("testing timeout");
    handle = setTimeout(testTimeout, 5000);
}

（I初始化handle与0 ，因为调用clearTimeout用0是一个无操作）。

Answer 2

您是否尝试过将变量分配给setinterval；

var foo = setTimeout(testTimeout(), 5000);

然后当正确的事件到来时，只需销毁该变量即可。

clearInterval(foo);

现在您可以再次指定它了...

Answer 3

在您的情况下，它只会无休止地重复，因为您正在执行函数而不是传递引用。 您应该这样做：

function testTimeout() {
    alert("testing timeout)";
    setTimeout(testTimeout, 5000);
}

注意testTimeout之后缺少的花括号。 这告诉setTimeout执行该函数，而不是该函数的结果，这就是原始代码的行为。

“我希望立即使用新参数在每隔5秒调用一次超时函数。但是，我不希望具有旧参数的超时函数继续重复执行”

为了实现您要执行的操作，您应该删除超时：

var timeoutId;
function testTimeout() {
    alert("testing timeout)";
    clearTimeout(timeoutId );
    timeoutId = setTimeout(testTimeout, 5000);
}

笔记：

• 您可以通过捕获setTimeout方法返回的id并将其传递给clearTimeout方法来停止触发前一个timeoutI