javascript - 调用已分配 SetTimeout 的 JavaScript 函数

Question

我不是 100% 确定 setTimeout 在 JavaScript 中是如何工作的。假设我有这样的东西:

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

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

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

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

按钮单击是否会调用 testTimeout 并每 5 秒添加另一个超时？或者，单击按钮会重置从按下按钮时起的超时时间吗？我问的原因是因为我想设计这样的东西，我可以将参数传递给我的超时函数。当网页启动时，我有一个默认参数。但是，如果我按下一个按钮，我希望立即调用我的超时函数，并在我的新参数之后每 5 秒调用一次。但是，我不希望带有旧参数的超时功能继续重复。我怎样才能做到这一点？任何帮助和理解将不胜感激。

Answer 1

This would display a popup window every 5 after the page is ready.

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

如果删除 ():

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

然后它会那样做。

What would happen if then I called testTimeout from a button click?

您最终会以两倍的频率调用该函数(每 5 秒不止一次)，因为每次调用它时，它都会重新安排自己的时间。第三次会使它更频繁(三次/秒)，依此类推。

---

如果您想避免这种情况，一种选择是记住计时器句柄并取消任何未完成的定时回调(如果您在此之前调用该函数):

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

(我用 0 初始化了 handle，因为用 0 调用 clearTimeout 是空操作。)