如何让 setInterval 从一开始就无延迟执行

2024-03-12 03:36:41

如何无延迟地立即执行 setInterval

前言

setInterval() 方法是 JavaScript 中一项强大的工具，用于按指定时间间隔执行代码块。虽然它在大多数情况下都能很好地工作，但有时你可能希望代码块在首次执行时不延迟。本文将探讨如何使用不同的策略实现这一目标。

立即执行函数 (IIFE)

最简单的解决方案是使用立即执行函数 (IIFE)。IIFE 是一个自调用的函数表达式，在定义时立即执行。通过将代码块包装在 IIFE 中，你可以确保它在首次执行时不延迟。

const intervalId = setInterval(() => {
  // 你的代码块
}, 1000);

setTimeout()

另一种方法是使用 setTimeout() 函数触发 setInterval() 的首次执行。setTimeout() 会安排一个函数在指定的延迟后执行。通过将 setInterval() 调用包装在 setTimeout() 中，你可以确保它在首次执行时不延迟。

setTimeout(() => {
  const intervalId = setInterval(() => {
    // 你的代码块
  }, 1000);
}, 0);

requestAnimationFrame()

requestAnimationFrame() 函数是另一个触发 setInterval() 无延迟首次执行的选项。它是一个 Web API，允许你请求浏览器在下一个动画帧之前执行一个函数。

let animationFrameId;

const loop = () => {
  // 你的代码块
  animationFrameId = requestAnimationFrame(loop);
};

animationFrameId = requestAnimationFrame(loop);

// 立即执行代码块一次
loop();

// 在 1 秒后取消动画帧
setTimeout(() => {
  cancelAnimationFrame(animationFrameId);
}, 1000);

postMessage()

postMessage() 函数是一个 Web API，允许你向其他窗口或 iframe 发送消息。它也可以用来触发 setInterval() 的首次执行。

let intervalId;

const loop = () => {
  // 你的代码块
  intervalId = setInterval(loop, 1000);
};

window.addEventListener("message", (event) => {
  if (event.data === "start") {
    loop();
  }
});

// 立即执行代码块一次
window.postMessage("start", "*");