SetTimeout（延迟计时器-最小延迟）

最新推荐文章于 2025-11-05 15:00:00 发布

原创

最新推荐文章于 2025-11-05 15:00:00 发布 · 1.8k 阅读

收录于

当前文章被以下社区和专栏收录：

本文探讨了浏览器中setTimeout和setInterval的最小延迟机制，介绍了利用window.postMessage实现0ms延迟定时器的方法，并通过示例展示了如何在React中运用消息通道进行时间切片。重点讲解了如何避免延迟累积和实现高性能定时器。

setTimeout 是有最小延迟时间?

MDN 文档 setTimeout
- 实际延时比设定值更久的原因：最小延迟时间
- 在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是 4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度）。
HTML Standard
- Timers can be nested; after five such nested timers, however, the interval is forced to be at least four milliseconds.
- (定时器可以嵌套;然而，在五个这样的嵌套定时器之后，间隔被强制为至少四毫秒。)
示例测试
  let a = performance.now();

  setTimeout(() => {

    let b = performance.now();

    console.log(b - a);

    setTimeout(() => {

      let c = performance.now();

      console.log(c - b);

      setTimeout(() => {

        let d = performance.now();

        console.log(d - c);

        setTimeout(() => {

          let e = performance.now();

          console.log(e - d);

          setTimeout(() => {

            let f = performance.now();

            console.log(f - e);

            setTimeout(() => {

              let g = performance.now();

   &