Vue.js

Appearance

On this page

定时器的实现：setTimeout 与 setInterval ​

setTimeout和setInterval是JavaScript中最常用的定时器API。但你是否想过：为什么setTimeout(fn, 0)不会立即执行？为什么setInterval可能会"漂移"？定时器的延迟为什么有最小值限制？本章将揭示定时器的底层实现原理。

定时器不是V8的一部分 ​

首先需要明确一点：

javascript
// 定时器的归属
class TimerOwnership {
  static demonstrate() {
    console.log('=== 定时器的实现者 ===\n');
    
    console.log('定时器API来自宿主环境，不是V8：');
    console.log('');
    console.log('  ┌─────────────────────────────────────────┐');
    console.log('  │               JavaScript代码            │');
    console.log('  └─────────────────────────────────────────┘');
    console.log('                       │');
    console.log('                       ↓');
    console.log('  ┌─────────────────────────────────────────┐');
    console.log('  │      V8引擎（执行JavaScript代码）        │');
    console.log('  │      不包含setTimeout/setInterval       │');
    console.log('  └─────────────────────────────────────────┘');
    console.log('                       │');
    console.log('                       ↓');
    console.log('  ┌─────────────────────────────────────────┐');
    console.log('  │     宿主环境（浏览器/Node.js）           │');
    console.log('  │     提供setTimeout/setInterval实现      │');
    console.log('  └─────────────────────────────────────────┘');
    console.log('');
    
    console.log('不同环境的实现：');
    console.log('  • 浏览器：由浏览器渲染引擎实现');
    console.log('  • Node.js：由libuv库实现');
    console.log('  • Deno：由Rust运行时实现\n');
  }
  
  static runAll() {
    this.demonstrate();
  }
}

TimerOwnership.runAll();

定时器的基本行为 ​

理解定时器的工作方式：

javascript
// 定时器基本行为
class TimerBasics {
  static demonstrateSetTimeout() {
    console.log('=== setTimeout基本行为 ===\n');
    
    console.log('setTimeout的特点：');
    console.log('  • 指定延迟后执行一次回调');
    console.log('  • 返回一个ID用于取消');
    console.log('  • 延迟时间是最小等待时间\n');
    
    console.log('代码示例：');
    console.log(`
    const id = setTimeout(() => {
      console.log('延迟执行');
    }, 1000);
    
    // 取消定时器
    clearTimeout(id);
    `);
    
    console.log('关键点：');
    console.log('  • 回调不保证精确在1000ms后执行');
    console.log('  • 只保证不会在1000ms之前执行');
    console.log('  • 实际执行时间取决于事件循环\n');
  }
  
  static demonstrateSetInterval() {
    console.log('=== setInterval基本行为 ===\n');
    
    console.log('setInterval的特点：');
    console.log('  • 每隔指定时间重复执行');
    console.log('  • 直到被clearInterval取消');
    console.log('  • 可能发生"间隔漂移"\n');
    
    console.log('代码示例：');
    console.log(`
    let count = 0;
    const id = setInterval(() => {
      count++;
      console.log('执行次数:', count);
      
      if (count >= 5) {
        clearInterval(id);
      }
    }, 1000);
    `);
  }
  
  static demonstrateZeroDelay() {
    console.log('=== setTimeout(fn, 0)的真相 ===\n');
    
    console.log('代码：');
    console.log(`
    console.log('1');
    setTimeout(() => console.log('2'), 0);
    console.log('3');
    `);
    
    console.log('输出：1 → 3 → 2');
    console.log('');
    console.log('原因：');
    console.log('  • 0ms不意味着立即执行');
    console.log('  • 回调被放入宏任务队列');
    console.log('  • 等当前同步代码和微任务执行完');
    console.log('  • 才会执行定时器回调\n');
    
    // 实际执行
    console.log('实际执行：');
    console.log('1');
    setTimeout(() => console.log('2'), 0);
    console.log('3\n');
  }
  
  static runAll() {
    this.demonstrateSetTimeout();
    this.demonstrateSetInterval();
    this.demonstrateZeroDelay();
  }
}

TimerBasics.runAll();

浏览器中的定时器实现 ​

浏览器如何管理定时器：

javascript
// 浏览器定时器实现
class BrowserTimerImplementation {
  static demonstrate() {
    console.log('=== 浏览器定时器架构 ===\n');
    
    console.log('定时器管理流程：');
    console.log('');
    console.log('  1. 调用setTimeout/setInterval');
    console.log('     │');
    console.log('     ↓');
    console.log('  2. 创建Timer对象，加入定时器队列');
    console.log('     │');
    console.log('     ↓');
    console.log('  3. 定时器线程检查到期的定时器');
    console.log('     │');
    console.log('     ↓');
    console.log('  4. 将到期的回调加入任务队列');
    console.log('     │');
    console.log('     ↓');
    console.log('  5. 事件循环取出任务执行');
    console.log('');
  }
  
  static demonstrateTimerQueue() {
    console.log('=== 定时器队列结构 ===\n');
    
    console.log('定时器通常使用最小堆存储：');
    console.log(`
    class TimerHeap {
      timers = [];  // 按到期时间排序的最小堆
      
      add(timer) {
        // 插入并上浮调整
        this.timers.push(timer);
        this.bubbleUp(this.timers.length - 1);
      }
      
      getNextTimer() {
        // 返回最近要到期的定时器
        return this.timers[0];
      }
      
      remove(timerId) {
        // 取消定时器
        const index = this.findById(timerId);
        if (index !== -1) {
          this.removeAt(index);
        }
      }
    }
    `);
    
    console.log('使用最小堆的优势：');
    console.log('  • 获取最近定时器：O(1)');
    console.log('  • 添加定时器：O(log n)');
    console.log('  • 删除定时器：O(log n)\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateTimerQueue();
  }
}

BrowserTimerImplementation.runAll();

最小延迟限制 ​

浏览器对定时器延迟的限制：

javascript
// 最小延迟
class MinimumDelay {
  static demonstrate() {
    console.log('=== 最小延迟限制 ===\n');
    
    console.log('HTML5规范规定：');
    console.log('  • 嵌套层级超过5层时');
    console.log('  • 最小延迟强制为4ms\n');
    
    console.log('代码示例：');
    console.log(`
    function nested(depth) {
      if (depth > 10) return;
      
      const start = performance.now();
      setTimeout(() => {
        const elapsed = performance.now() - start;
        console.log('深度' + depth + ': 实际延迟', elapsed, 'ms');
        nested(depth + 1);
      }, 0);
    }
    
    nested(1);
    `);
    
    console.log('预期输出：');
    console.log('  深度1-5: 实际延迟 ~0-1ms');
    console.log('  深度6+:  实际延迟 ~4ms\n');
  }
  
  static demonstrateBackgroundThrottling() {
    console.log('=== 后台标签页限制 ===\n');
    
    console.log('当标签页不可见时：');
    console.log('  • 最小延迟提高到1000ms');
    console.log('  • 减少后台CPU使用');
    console.log('  • 节省电池消耗\n');
    
    console.log('例外情况：');
    console.log('  • 播放音频的页面');
    console.log('  • 实时WebSocket连接');
    console.log('  • 正在使用的WebRTC\n');
  }
  
  static demonstrateIntervalClamping() {
    console.log('=== setInterval最小间隔 ===\n');
    
    console.log('setInterval同样受限：');
    console.log('  • 最小间隔4ms');
    console.log('  • 后台标签页1000ms\n');
    
    console.log('示例：');
    console.log(`
    // 请求1ms间隔，实际最小4ms
    setInterval(() => {
      console.log('tick');
    }, 1);
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateBackgroundThrottling();
    this.demonstrateIntervalClamping();
  }
}

MinimumDelay.runAll();

setInterval的漂移问题 ​

setInterval为什么不精确：

javascript
// 间隔漂移
class IntervalDrift {
  static demonstrate() {
    console.log('=== setInterval漂移问题 ===\n');
    
    console.log('问题描述：');
    console.log('  setInterval的间隔从回调开始计时');
    console.log('  如果回调执行时间变化');
    console.log('  累计误差会越来越大\n');
    
    console.log('示意图：');
    console.log('');
    console.log('  理想情况（间隔1000ms）：');
    console.log('  |--1000--|--1000--|--1000--|');
    console.log('  ↑        ↑        ↑        ↑');
    console.log('  0ms    1000ms   2000ms   3000ms');
    console.log('');
    console.log('  实际情况（回调耗时100ms）：');
    console.log('  |--1000--|100|--1000--|100|--1000--|');
    console.log('  ↑        ↑           ↑           ↑');
    console.log('  0ms    1000ms      2100ms      3200ms');
    console.log('');
    console.log('  漂移越来越大！');
    console.log('');
  }
  
  static demonstrateFix() {
    console.log('=== 修复漂移的方法 ===\n');
    
    console.log('方法1：使用setTimeout自校正');
    console.log(`
    function preciseInterval(callback, interval) {
      let expected = Date.now() + interval;
      
      function step() {
        const drift = Date.now() - expected;
        
        callback();
        
        expected += interval;
        // 自动校正下次延迟
        const nextDelay = Math.max(0, interval - drift);
        setTimeout(step, nextDelay);
      }
      
      setTimeout(step, interval);
    }
    `);
    
    console.log('方法2：记录开始时间');
    console.log(`
    function accurateInterval(callback, interval) {
      const start = Date.now();
      let count = 0;
      
      function tick() {
        count++;
        callback();
        
        // 计算下次应该执行的时间
        const target = start + count * interval;
        const delay = target - Date.now();
        
        setTimeout(tick, Math.max(0, delay));
      }
      
      setTimeout(tick, interval);
    }
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateFix();
  }
}

IntervalDrift.runAll();

Node.js中的定时器 ​

Node.js的定时器实现：

javascript
// Node.js定时器
class NodejsTimers {
  static demonstrate() {
    console.log('=== Node.js定时器实现 ===\n');
    
    console.log('Node.js使用libuv实现定时器：');
    console.log('');
    console.log('  ┌─────────────────────────────────────┐');
    console.log('  │           Node.js Timer API         │');
    console.log('  │    setTimeout / setInterval         │');
    console.log('  └─────────────────────────────────────┘');
    console.log('                    │');
    console.log('                    ↓');
    console.log('  ┌─────────────────────────────────────┐');
    console.log('  │           libuv定时器               │');
    console.log('  │    uv_timer_t / uv_timer_start      │');
    console.log('  └─────────────────────────────────────┘');
    console.log('                    │');
    console.log('                    ↓');
    console.log('  ┌─────────────────────────────────────┐');
    console.log('  │         操作系统定时机制            │');
    console.log('  │    epoll_wait / kqueue / IOCP       │');
    console.log('  └─────────────────────────────────────┘');
    console.log('');
  }
  
  static demonstrateNodeTimerPhase() {
    console.log('=== Node.js事件循环中的定时器阶段 ===\n');
    
    console.log('定时器在事件循环的第一个阶段：');
    console.log('');
    console.log('  ┌───────────────────────────────┐');
    console.log('  │    timers (定时器阶段)  ◀────────── setTimeout/setInterval');
    console.log('  └───────────────────────────────┘');
    console.log('                    ↓');
    console.log('  ┌───────────────────────────────┐');
    console.log('  │    pending callbacks          │');
    console.log('  └───────────────────────────────┘');
    console.log('                    ↓');
    console.log('  ┌───────────────────────────────┐');
    console.log('  │    idle, prepare              │');
    console.log('  └───────────────────────────────┘');
    console.log('                    ↓');
    console.log('  ┌───────────────────────────────┐');
    console.log('  │    poll (轮询阶段)            │');
    console.log('  └───────────────────────────────┘');
    console.log('                    ↓');
    console.log('  ┌───────────────────────────────┐');
    console.log('  │    check ◀──────────────────────── setImmediate');
    console.log('  └───────────────────────────────┘');
    console.log('');
  }
  
  static demonstrateSetImmediate() {
    console.log('=== setImmediate vs setTimeout ===\n');
    
    console.log('setImmediate在check阶段执行');
    console.log('setTimeout在timers阶段执行\n');
    
    console.log('代码示例：');
    console.log(`
    // 在I/O回调中，setImmediate总是先执行
    const fs = require('fs');
    
    fs.readFile('file.txt', () => {
      setTimeout(() => console.log('timeout'), 0);
      setImmediate(() => console.log('immediate'));
    });
    
    // 输出：immediate, timeout
    `);
    
    console.log('原因：');
    console.log('  I/O回调在poll阶段执行');
    console.log('  poll之后是check阶段（setImmediate）');
    console.log('  然后才是下一轮的timers阶段\n');
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateNodeTimerPhase();
    this.demonstrateSetImmediate();
  }
}

NodejsTimers.runAll();

定时器的内存管理 ​

定时器与垃圾回收：

javascript
// 定时器内存管理
class TimerMemoryManagement {
  static demonstrate() {
    console.log('=== 定时器与内存泄漏 ===\n');
    
    console.log('常见内存泄漏模式：');
    console.log(`
    class Component {
      constructor() {
        // 创建定时器
        this.intervalId = setInterval(() => {
          this.update();  // 引用this
        }, 1000);
      }
      
      update() {
        console.log('updating...');
      }
      
      // 忘记清理定时器！
      // destroy() {
      //   clearInterval(this.intervalId);
      // }
    }
    
    let component = new Component();
    component = null;  // 无法被GC！
    // 因为定时器回调仍引用component
    `);
  }
  
  static demonstrateFix() {
    console.log('=== 正确的清理方式 ===\n');
    
    console.log('方案1：显式清理');
    console.log(`
    class Component {
      constructor() {
        this.intervalId = setInterval(() => {
          this.update();
        }, 1000);
      }
      
      destroy() {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    }
    `);
    
    console.log('方案2：WeakRef（现代方案）');
    console.log(`
    class Component {
      constructor() {
        const weakThis = new WeakRef(this);
        
        this.intervalId = setInterval(() => {
          const self = weakThis.deref();
          if (self) {
            self.update();
          } else {
            // 对象已被GC，清理定时器
            clearInterval(this.intervalId);
          }
        }, 1000);
      }
    }
    `);
  }
  
  static demonstrateClosureCapture() {
    console.log('=== 闭包捕获问题 ===\n');
    
    console.log('问题代码：');
    console.log(`
    function createTimer() {
      const largeData = new Array(1000000).fill('x');
      
      setTimeout(() => {
        // 回调捕获了largeData
        console.log(largeData.length);
      }, 60000);
    }
    
    createTimer();
    // largeData在1分钟内无法释放
    `);
    
    console.log('解决方案：');
    console.log(`
    function createTimer() {
      const largeData = new Array(1000000).fill('x');
      const length = largeData.length;  // 只保留需要的数据
      
      setTimeout(() => {
        console.log(length);  // largeData可以被GC
      }, 60000);
    }
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateFix();
    this.demonstrateClosureCapture();
  }
}

TimerMemoryManagement.runAll();

高精度定时器 ​

需要更高精度时的选择：

javascript
// 高精度定时器
class HighPrecisionTimers {
  static demonstrate() {
    console.log('=== requestAnimationFrame ===\n');
    
    console.log('特点：');
    console.log('  • 与屏幕刷新率同步（通常60Hz）');
    console.log('  • 约16.67ms一帧');
    console.log('  • 页面不可见时自动暂停');
    console.log('  • 适合动画和渲染\n');
    
    console.log('示例：');
    console.log(`
    function animate() {
      // 更新动画
      element.style.left = (parseFloat(element.style.left) + 1) + 'px';
      
      // 请求下一帧
      requestAnimationFrame(animate);
    }
    
    requestAnimationFrame(animate);
    `);
  }
  
  static demonstratePerformanceNow() {
    console.log('=== performance.now() ===\n');
    
    console.log('提供高精度时间戳：');
    console.log('  • 微秒级精度');
    console.log('  • 从页面加载开始计时');
    console.log('  • 不受系统时间调整影响\n');
    
    console.log('用于精确测量：');
    console.log(`
    const start = performance.now();
    
    // 执行一些操作
    doSomething();
    
    const end = performance.now();
    console.log('耗时:', (end - start).toFixed(3), 'ms');
    `);
  }
  
  static demonstrateWebWorkerTimers() {
    console.log('=== Web Worker中的定时器 ===\n');
    
    console.log('Worker中的定时器不受主线程阻塞影响：');
    console.log(`
    // worker.js
    let count = 0;
    setInterval(() => {
      count++;
      postMessage(count);
    }, 1000);
    
    // main.js
    const worker = new Worker('worker.js');
    worker.onmessage = (e) => {
      console.log('收到:', e.data);
    };
    
    // 即使主线程繁忙，Worker定时器仍正常
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstratePerformanceNow();
    this.demonstrateWebWorkerTimers();
  }
}

HighPrecisionTimers.runAll();

模拟实现定时器 ​

理解定时器的核心逻辑：

javascript
// 定时器模拟实现
class TimerSimulation {
  static timers = new Map();
  static nextId = 1;
  
  static mySetTimeout(callback, delay, ...args) {
    const id = this.nextId++;
    const executeTime = Date.now() + delay;
    
    this.timers.set(id, {
      callback,
      args,
      executeTime,
      type: 'timeout'
    });
    
    return id;
  }
  
  static mySetInterval(callback, delay, ...args) {
    const id = this.nextId++;
    
    this.timers.set(id, {
      callback,
      args,
      delay,
      executeTime: Date.now() + delay,
      type: 'interval'
    });
    
    return id;
  }
  
  static myClearTimeout(id) {
    this.timers.delete(id);
  }
  
  static myClearInterval(id) {
    this.timers.delete(id);
  }
  
  // 模拟事件循环检查定时器
  static tick() {
    const now = Date.now();
    
    for (const [id, timer] of this.timers) {
      if (timer.executeTime <= now) {
        // 执行回调
        timer.callback(...timer.args);
        
        if (timer.type === 'timeout') {
          // 一次性定时器，删除
          this.timers.delete(id);
        } else {
          // 重复定时器，更新下次执行时间
          timer.executeTime = now + timer.delay;
        }
      }
    }
  }
  
  static demonstrate() {
    console.log('=== 定时器模拟实现 ===\n');
    
    console.log('核心数据结构：');
    console.log(`
    {
      id: 1,
      callback: function,
      args: [],
      executeTime: timestamp,
      type: 'timeout' | 'interval',
      delay: number  // 仅interval
    }
    `);
    
    console.log('事件循环检查逻辑：');
    console.log('  1. 获取当前时间');
    console.log('  2. 遍历所有定时器');
    console.log('  3. 如果executeTime <= now，执行回调');
    console.log('  4. timeout删除，interval更新时间\n');
  }
}

TimerSimulation.demonstrate();

性能最佳实践 ​

定时器使用建议：

javascript
// 性能最佳实践
class TimerBestPractices {
  static demonstrate() {
    console.log('=== 定时器最佳实践 ===\n');
    
    console.log('1. 避免过多定时器：');
    console.log(`
    // 不推荐：每个元素一个定时器
    elements.forEach(el => {
      setInterval(() => animate(el), 16);
    });
    
    // 推荐：单个定时器管理所有
    setInterval(() => {
      elements.forEach(el => animate(el));
    }, 16);
    `);
    
    console.log('2. 使用requestAnimationFrame做动画：');
    console.log(`
    // 不推荐
    setInterval(() => {
      updateAnimation();
    }, 16);
    
    // 推荐
    function animate() {
      updateAnimation();
      requestAnimationFrame(animate);
    }
    `);
    
    console.log('3. 及时清理：');
    console.log(`
    // React组件示例
    useEffect(() => {
      const id = setInterval(tick, 1000);
      return () => clearInterval(id);  // 清理
    }, []);
    `);
  }
  
  static demonstrateDebounce() {
    console.log('=== 防抖与节流 ===\n');
    
    console.log('防抖（debounce）：');
    console.log(`
    function debounce(fn, delay) {
      let timeoutId;
      
      return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      };
    }
    
    // 输入停止300ms后才搜索
    const search = debounce(query => {
      fetchResults(query);
    }, 300);
    `);
    
    console.log('节流（throttle）：');
    console.log(`
    function throttle(fn, interval) {
      let lastTime = 0;
      
      return function(...args) {
        const now = Date.now();
        if (now - lastTime >= interval) {
          lastTime = now;
          fn.apply(this, args);
        }
      };
    }
    
    // 最多每100ms执行一次
    const onScroll = throttle(() => {
      updatePosition();
    }, 100);
    `);
  }
  
  static runAll() {
    this.demonstrate();
    this.demonstrateDebounce();
  }
}

TimerBestPractices.runAll();

本章小结 ​

本章探讨了定时器的实现原理和最佳实践。核心要点包括：

  1. 定时器来源：setTimeout/setInterval由宿主环境实现，不是V8的一部分。浏览器和Node.js有各自的实现。

  2. 执行时机：定时器回调作为宏任务执行，延迟时间是最小等待时间，不保证精确执行。

  3. 最小延迟：嵌套超过5层时，最小延迟为4ms。后台标签页延迟可达1000ms。

  4. 漂移问题：setInterval可能累计误差，需要自校正机制保证精确间隔。

  5. Node.js特性：定时器在事件循环的timers阶段执行，setImmediate在check阶段。

  6. 内存管理：定时器回调的闭包可能导致内存泄漏，必须及时清理。

  7. 高精度选择：动画使用requestAnimationFrame，时间测量使用performance.now()。

理解定时器的工作原理，能帮助你避免常见的陷阱，写出更可靠的异步代码。下一章我们将探讨异步迭代器的实现。

在 GitHub 上编辑此页