'setInterval'与'setTimeout' [重复]答案

【问题标题】：'setInterval' vs 'setTimeout' [duplicate]'setInterval'与'setTimeout' [重复]
【发布时间】：2011-02-11 09:45:37
【问题描述】：

两者的主要区别是什么

setInterval

和

setTimeout

在 JavaScript 中？

【问题讨论】：

来自您提供的每个链接的摘要（提示提示 - 请参见粗体字）：setInterval - “调用函数或执行代码 sn-p 重复，每次调用该函数之间都有固定的时间延迟。" ; setTimeout - "在指定延迟后调用函数或执行代码sn-p"
他们应该将这些函数重命名为更相关的名称，例如 execute_once_after() 和 execute_each()，而且我认为由于驼峰式大小写而避免使用更长（但清晰）的变量/函数名称是一个很大的错误目前的开发文献，由于现代 IDE 可以高效地自动完成并且不需要使用这种加密的修剪语句，我个人更喜欢蛇案例来给出描述性的函数和变量名称，它可以节省读者的心理健康;）。

标签： javascript

【解决方案1】：

setTimeout(expression, timeout); 在超时后运行代码/函数一次。

setInterval(expression, timeout); 运行代码/函数重复，每次重复之间的超时长度。

例子：

var intervalID = setInterval(alert, 1000); // Will alert every second.
// clearInterval(intervalID); // Will clear the timer.

setTimeout(alert, 1000); // Will alert once, after a second.

【讨论】：

我有一个 div 我想在页面加载后显示并在 X 秒后消失。将 setTimeout 与将样式更改为显示 none 的函数一起使用可以实现此目的吗？
听说 setTimeout 更适合动画？这有什么道理吗？
如果页面刷新则设置的时间间隔是否也重置？
@lunixbochs，你能说一下，刷新页面时setInterval或setTimeout是否也刷新了？
当页面关闭或重新加载时，JavaScript 执行会完全重置。这也适用于 setInterval 和 setTimeout。

【解决方案2】：

setInterval 在间隔中一次又一次地触发，而setTimeout 只触发一次。

见reference at MDN。

【讨论】：

【解决方案3】：

setTimeout():

这是一个执行JavaScript语句AFTERx间隔的函数。

setTimeout(function () {
    something();
}, 1000); // Execute something() 1 second later.

setInterval():

它是一个执行 JavaScript 语句EVERY x 间隔的函数。

setInterval(function () {
    somethingElse();
}, 2000); // Execute somethingElse() every 2 seconds.

两个函数的间隔单位为millisecond。

【讨论】：

【解决方案4】：

`setInterval()`

setInterval 是一种基于时间间隔的代码执行方法，具有在达到间隔时重复运行指定脚本的本机能力。脚本作者不应将其嵌套到其回调函数中以使其循环，因为默认情况下它会循环。除非您调用 clearInterval()，否则它将继续按间隔触发。

如果你想循环动画或时钟的代码然后使用 setInterval。

function doStuff() {
alert("run your code here when time interval is reached");
}
var myTimer = setInterval(doStuff, 5000);

`setTimeout()`

setTimeout 是一种基于时间的代码执行方法，它只会在达到间隔时执行一次脚本，并且不会再次重复，除非您通过将 setTimeout 对象嵌套在它调用运行的函数中来使其循环脚本。如果适合循环，除非您调用 clearTimeout()，否则它将继续按间隔触发。

function doStuff() {
alert("run your code here when time interval is reached");
}
var myTimer = setTimeout(doStuff, 5000);

如果你想让某件事在几秒钟后发生一次然后使用 setTimeout... 因为它只在达到间隔时执行一次。

【讨论】：

这是比其他解释更彻底的解释。 setInterval 用于循环动画的用例非常有用。为了进一步改进这个答案，您是否会提供一个工作示例来解释“脚本作者不应将它嵌套到其回调函数中以使其循环，因为它默认循环”是什么意思？也许是一个不该做什么的例子，然后是一个当作者期望使用循环时应该做什么的例子？
您可能想要嵌套一个 setTimeout 以使其循环。 function loopingTimeout(){setTimeout(function(){console.log("Timed out!");loopingTimeout();}, 1000)};
但是用 setInterval 做同样的事情可能不是一个好主意，因为 setInterval 默认已经循环了。 function loopingInterval(){setInterval(function(){console.log("Soon this will spawn thousands of setIntervals and most likely freeze your browser.");loopingInterval();}, 1000)};

【解决方案5】：

setInterval 重复调用，setTimeout 只运行一次。

【讨论】：