前端实现一个高精准定时器和延时器的完整代码

setInterval(fn, 1000);
// 实际执行时间 = 1000 + fn执行时间

function preciseTimeout(fn, delay) {
  const start = performance.now();

  function loop() {
    const now = performance.now();
    if (now - start >= delay) {
      fn();
    } else {
      requestAnimationFrame(loop);
    }
  }

  loop();
}

function preciseInterval(fn, interval) {
  let expected = performance.now() + interval;

  function step() {
    const drift = performance.now() - expected;

    fn();

    expected += interval;
    setTimeout(step, Math.max(0, interval - drift));
  }

  setTimeout(step, interval);
}

setInterval(() => {
  postMessage(Date.now());
}, 1000);

const worker = new Worker('worker.js');
worker.onmessage = () => {
  console.log('tick');
};

let last = performance.now();

function rafTimer() {
  const now = performance.now();
  if (now - last >= 1000) {
    console.log('tick');
    last = now;
  }
  requestAnimationFrame(rafTimer);
}

rafTimer();