Web前端入门第 87 问：JavaScript 中 setInterval 和 setTimeout 细节

setInterval 和 setTimeout 两者都是用于控制 JS 函数延迟执行，但是在执行机制和用途上还是有点儿差异。
虽然说两者功能上有区别，但在使用上却可以相互模拟各自的功能，大胆的猜测下：也许浏览器内核底层都是同一个方法，只是上层封装出的两个语法糖而已。
语法

两者在语法上极其相似，除了方法名不一样，其他地方没有任何区别：

1. // 启动定时器
2. const intervalID = setInterval(func, delay, [arg1], [arg2], ...);
3. const timeoutID = setTimeout(func, delay, [arg1], [arg2], ...);
5. // 停止定时器
6. clearInterval(intervalID);
7. clearTimeout(timeoutID);

复制代码

执行次数区别

• setInterval 用于控制函数在指定时间间隔重复执行，直到程序代码手动清除定时任务或浏览器进程退出。
  

1. [/code]效果：
2. [align=center] [/align]
3. [list]
4. [*]setTimeout 用于控制函数在延迟时间后执行一次，然后自动停止。可以通过递归调用模拟 setInterval。
5. [/list][code]

复制代码

效果：

<button><button>取消定时器</button></button>区别

从语法上就能看出来，<button><button>取消定时器</button></button>的时需要使用对应的取消方法，不能混用：

• clearInterval
  

1. <button><button>取消定时器</button></button>

复制代码

效果：

• clearTimeout
  

1. <button><button>取消定时器</button></button>

复制代码

效果：

可靠性

重点！
记得最开始学习 JS 的时候就有看到说明，setInterval 的定时器是不管任务执行耗时，反正每次到了时间就要执行，不论是否有耗时任务正在执行。而 setTimeout 启动的定时器，会在等到耗时任务执行之后才会启动下一次任务。
所以，如果 setInterval 设定间隔 100ms，但回调需 200ms 执行，就会造成任务堆积，从而引发性能问题，解决办法就是使用递归 setTimeout 来替代。
语言有些空洞，看例子：

1. <button>取消 interval 定时器</button>

复制代码

以上代码由于 handle 任务耗时过长， setInterval 定时器并不会等待任务执行完毕，而是直接执行下一次任务，这就会有一个问题，如果清除定时器，任务不会立即停止，还是有部分执行中的任务正在运行。效果：

setTimeout 在处理这种情况时，也会存在问题，虽然每次任务会进行排队，但在点击停止按钮时，由于有异步耗时任务正在执行，清除定时器时，没办法立即终止任务，可以尝试下以下代码：

1. <button><button>取消 timeout 定时器</button></button>

复制代码

效果：

使用 AbortController 停止定时器：

1. <button><button>取消 timeout 定时器</button></button>

复制代码

上面代码中运用了 AbortController 这个控制器终止定时任务，在任务终止后，直接抛出异常，停止定时器。效果：

写在最后

定时器是个好东西，但细节也很多，稍不注意就会出现流程错误，所以在使用时还是需要仔细斟酌~~
setInterval 和 setTimeout 没有绝对的应用场景，两者在使用上都可以互相模拟，只是编写代码量的多少而已。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！