Web前端入门第 87 问：JavaScript 中 setInterval 和 setTimeout 细节
setInterval 和 setTimeout 两者都是用于控制 JS 函数延迟执行，但是在执行机制和用途上还是有点儿差异。虽然说两者功能上有区别，但在使用上却可以相互模拟各自的功能，大胆的猜测下：也许浏览器内核底层都是同一个方法，只是上层封装出的两个语法糖而已。
语法
两者在语法上极其相似，除了方法名不一样，其他地方没有任何区别：
// 启动定时器
const intervalID = setInterval(func, delay, , , ...);
const timeoutID = setTimeout(func, delay, , , ...);
// 停止定时器
clearInterval(intervalID);
clearTimeout(timeoutID);执行次数区别
[*]setInterval 用于控制函数在指定时间间隔重复执行，直到程序代码手动清除定时任务或浏览器进程退出。
效果：
[*]setTimeout 用于控制函数在延迟时间后执行一次，然后自动停止。可以通过递归调用模拟 setInterval。
效果：
<button><button>取消定时器</button></button>区别
从语法上就能看出来，<button><button>取消定时器</button></button>的时需要使用对应的取消方法，不能混用：
[*]clearInterval
<button><button>取消定时器</button></button>效果：
[*]clearTimeout
<button><button>取消定时器</button></button>效果：
可靠性
重点！
记得最开始学习 JS 的时候就有看到说明，setInterval 的定时器是不管任务执行耗时，反正每次到了时间就要执行，不论是否有耗时任务正在执行。而 setTimeout 启动的定时器，会在等到耗时任务执行之后才会启动下一次任务。
所以，如果 setInterval 设定间隔 100ms，但回调需 200ms 执行，就会造成任务堆积，从而引发性能问题，解决办法就是使用递归 setTimeout 来替代。
语言有些空洞，看例子：
<button>取消 interval 定时器</button>以上代码由于 handle 任务耗时过长， setInterval 定时器并不会等待任务执行完毕，而是直接执行下一次任务，这就会有一个问题，如果清除定时器，任务不会立即停止，还是有部分执行中的任务正在运行。效果：
setTimeout 在处理这种情况时，也会存在问题，虽然每次任务会进行排队，但在点击停止按钮时，由于有异步耗时任务正在执行，清除定时器时，没办法立即终止任务，可以尝试下以下代码：
<button><button>取消 timeout 定时器</button></button>效果：
使用 AbortController 停止定时器：
<button><button>取消 timeout 定时器</button></button>上面代码中运用了 AbortController 这个控制器终止定时任务，在任务终止后，直接抛出异常，停止定时器。效果：
写在最后
定时器是个好东西，但细节也很多，稍不注意就会出现流程错误，所以在使用时还是需要仔细斟酌~~
setInterval 和 setTimeout 没有绝对的应用场景，两者在使用上都可以互相模拟，只是编写代码量的多少而已。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 谢谢分享，试用一下
页:
[1]