setTimeout为什么会有延迟

what

首先来解释下什么是 setTimout :此函数是一个全局函数,可以用来设置一个定时器,在指定时间后触发回掉函数。

其中 setTimeout 有两类用法:

1
2
/* 本用法不推荐,code 为字符串,在定时器到期后会进行编译执行code字符串,delay为定时时间 */
setTimeout(code, delay)
1
2
/* functionRef 定时器到期后的回调函数;delay 定时时间;...params 作为参数传递给回调函数 */
setTimeout(functionRef, delay, param1, param2)

setTimeout 返回值为一个正整数类型的 timeoutID ,可使用 clearTimeout 进行取消定时器。

Why

为什么 setTimeout 会有 4ms 的延迟呢?

实际上题目不完全对,并不完全是会有 4ms 延迟。正如 HTML 标准中规定的那样,一旦对 setTimeout 的嵌套调用被安排了 5 次,浏览器将强制执行 4 毫秒的最小超时。

其他影响 setTimout 延迟因素:

  1. 并发任务: 在浏览器中,存在多个任务需要处理,如用户交互、DOM 更新、网络请求等。这些任务会占用浏览器的资源和处理能力。当设置一个 setTimeout 的延迟时间时,浏览器可能会优先处理其他任务,导致 setTimeout 的回调函数的执行被推迟。
  2. 执行上下文的切换: 当定时器到期时,浏览器需要切换执行上下文来调用 setTimeout 的回调函数。这个上下文切换可能会引入一定的延迟。浏览器需要在当前任务完成后,选择合适的时机执行回调函数。
  3. 系统和硬件因素: 系统负载、设备性能以及浏览器实现的差异等因素也会影响 setTimeout 回调函数的执行时间。不同的浏览器和设备可能有不同的延迟表现。

相关文章

MDN setTimeout

为什么 setTimeout 有最小时延 4ms ?

How JavaScript Timers Work