javascript之调度：setTimeout 和 setInterval
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript之调度：setTimeout 和 setInterval相关的知识，希望对你有一定的参考价值。
目前有两种方式可以实现：
setTimeout允许我们将函数推迟到一段时间间隔之后再执行。setInterval允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
setTimeout:
语法：
let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)
参数说明：
func|code
想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。
delay
执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
arg1，arg2…
要传入被执行函数（或代码字符串）的参数列表（IE9 以下不支持）
例如，在下面这个示例中，sayHi() 方法会在 1 秒后执行：
<!DOCTYPE html>
<script>
"use strict";
function sayHi() {
alert('Hello');
}
setTimeout(sayHi, 1000);
</script>clearTimeout取消调度：
let timerId = setTimeout(...);
clearTimeout(timerId);
setInteval
语法：
let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...)
<!DOCTYPE html>
<script>
"use strict";
// 每 2 秒重复一次
let timerId = setInterval(() => alert('tick'), 2000);
// 5 秒之后停止
setTimeout(() => { clearInterval(timerId); alert('stop'); }, 5000);
</script>嵌套的setTimeout
/** instead of:
let timerId = setInterval(() => alert('tick'), 2000);
*/
let timerId = setTimeout(function tick() {
alert('tick');
timerId = setTimeout(tick, 2000); // (*)
}, 2000);setTimeout可以嵌套，但是setInterval不可以。
零延时的用法：
这儿有一种特殊的用法：setTimeout(func, 0)，或者仅仅是 setTimeout(func)。
总结
setTimeout(func, delay, ...args)和setInterval(func, delay, ...args)方法允许我们在delay毫秒之后运行func一次或以delay毫秒为时间间隔周期性运行func。- 要取消函数的执行，我们应该调用
clearInterval/clearTimeout，并将setInterval/setTimeout返回的值作为入参传入。- 嵌套的
setTimeout比setInterval用起来更加灵活，允许我们更精确地设置两次执行之间的时间。- 零延时调度
setTimeout(func, 0)（与setTimeout(func)相同）用来调度需要尽快执行的调用，但是会在当前脚本执行完成后进行调用。- 浏览器会将
setTimeout或setInterval的五层或更多层嵌套调用（调用五次之后）的最小延时限制在 4ms。这是历史遗留问题。
请注意，所有的调度方法都不能 保证 确切的延时。
例如，浏览器内的计时器可能由于许多原因而变慢：
- CPU 过载。
- 浏览器页签处于后台模式。
- 笔记本电脑用的是电池供电（译注：使用电池供电会以降低性能为代价提升续航）。
所有这些因素，可能会将定时器的最小计时器分辨率（最小延迟）增加到 300ms 甚至 1000ms，具体以浏览器及其设置为准。
以上是关于javascript之调度：setTimeout 和 setInterval的主要内容，如果未能解决你的问题，请参考以下文章
浏览器原理 37 # 任务调度：有了setTimeOut，为什么还要使用 requestAnimationFrame？
Javascript异步编程之setTimeout与setInterval详解分析