setTimeout 零延迟的应用场景

问题

setTimeout 的延迟参数设置为 0 时，有哪些实际应用场景？

解答

setTimeout(fn, 0) 会创建一个宏任务，虽然延迟为 0，但不会立即执行，而是在当前执行栈清空后执行。这个特性在以下场景中很有用：

等待 UI 渲染完成

当需要在 DOM 更新并渲染到屏幕后再执行某些操作时，可以使用零延迟：

// 更新 DOM
element.textContent = '新内容';

// 等待浏览器渲染后再执行
setTimeout(() => {
  // 此时 DOM 已经渲染完成
  const height = element.offsetHeight;
  console.log('渲染后的高度:', height);
}, 0);

调整任务执行顺序

将某些操作推迟到下一个事件循环，让其他同步代码或微任务先执行：

console.log('1');

setTimeout(() => {
  console.log('3');
}, 0);

Promise.resolve().then(() => {
  console.log('2');
});

// 输出顺序: 1 -> 2 -> 3

避免长时间阻塞

处理大量数据时，分批执行可以避免阻塞主线程：

function processLargeArray(array) {
  const batchSize = 100;
  let index = 0;

  function processBatch() {
    const end = Math.min(index + batchSize, array.length);
    
    for (let i = index; i < end; i++) {
      // 处理数据
      array[i] = array[i] * 2;
    }
    
    index = end;
    
    if (index < array.length) {
      setTimeout(processBatch, 0);
    }
  }
  
  processBatch();
}

关键点

• setTimeout(fn, 0) 不是立即执行，而是在当前执行栈清空后执行
• 可用于等待浏览器完成 UI 渲染后再执行回调
• 适合调整异步任务的执行顺序，宏任务会在微任务之后执行
• 处理大量数据时分批执行，避免长时间阻塞主线程