打造零延迟的计时器：突破 setTimeout 的局限

2023-12-07 14:58:31

如何打造零延迟的计时器？

简介

在现代应用程序开发中，实现精准的计时机制对于确保响应性和用户体验至关重要。虽然 JavaScript 的 setTimeout 函数为我们提供了延迟执行代码的能力，但它存在着固有的最小延迟，这在某些场景下可能会造成问题。本文将探讨如何克服此限制，打造零延迟的计时器。

超越 `setTimeout` 的局限性

setTimeout 函数的最小延迟是由浏览器的 JavaScript 引擎决定的，并且根据系统和浏览器而有所不同。这种延迟的存在是为了避免 JavaScript 事件循环的阻塞，从而保持浏览器响应能力。

为了突破 setTimeout 的限制，我们需要转向更底层的 API，这些 API 可以提供更精确的计时控制。

利用 Web Workers 和 SharedArrayBuffer

一种方法是利用 Web Workers 和 SharedArrayBuffer。Web Workers 是后台线程，可以与主线程独立运行 JavaScript 代码。通过使用 SharedArrayBuffer，主线程和 Web Worker 可以共享内存，从而允许它们进行快速高效的通信。

步骤：

创建一个 Web Worker 并将其命名为 timer.js：

// timer.js
onmessage = ({ data: { delay } }) => {
  setTimeout(() => {
    postMessage('Time elapsed');
  }, delay);
};

在主线程中创建 Web Worker：

// main.js
const worker = new Worker('timer.js');

// 创建一个 SharedArrayBuffer
const buffer = new SharedArrayBuffer(4);

// 将 buffer 传递给 Web Worker
worker.postMessage({ buffer }, [buffer]);

在 Web Worker 中读取 SharedArrayBuffer：

// timer.js
const buffer = event.data[0];
const atom = new Int32Array(buffer);

使用 Atom 来实现零延迟的计时器：

// timer.js
let previousTime = Date.now();

function updateAtom() {
  const now = Date.now();
  const diff = now - previousTime;

  // 更新 SharedArrayBuffer 中的 atom
  atom[0] = diff;

  // 重置 previousTime
  previousTime = now;

  requestAnimationFrame(updateAtom);
}

// 开始计时
updateAtom();

在主线程中监听 SharedArrayBuffer 的变化：

// main.js
const int32View = new Int32Array(buffer);

// 监听 SharedArrayBuffer 中 atom 的变化
buffer.addEventListener('message', () => {
  console.log(`Time elapsed: ${int32View[0]}ms`);
});

利用 requestIdleCallback

另一种方法是利用 requestIdleCallback API。该 API 允许我们请求浏览器在浏览器空闲时执行回调函数。这可以帮助我们避免阻塞主线程，同时仍然可以实现近乎零延迟的计时。

步骤：

在主线程中使用 requestIdleCallback：

// main.js
requestIdleCallback((deadline) => {
  const now = deadline.timeRemaining();

  if (now < 0) {
    // 请求下一个空闲时段
    requestIdleCallback(deadline);
  } else {
    // 执行计时操作
    console.log(`Time elapsed: ${now}ms`);

    // 再次请求空闲时段
    requestIdleCallback(deadline);
  }
});