用 setTimeout 简单模拟 setInterval

计时器在 JavaScript 中的强大作用：深入了解 setTimeout() 和 setInterval()

在 JavaScript 的世界中，计时器扮演着至关重要的角色，其中 setTimeout() 和 setInterval() 是最常用的函数。它们使我们能够在特定的时间点或间隔内执行代码，为我们的应用程序增添了动态性和交互性。

setTimeout() 与 setInterval()：相似的姐妹，不同的命运

虽然 setTimeout() 和 setInterval() 看起来很相似，但它们的功能截然不同。

• setTimeout()：一次性事件

setTimeout() 是一个一次性的计时器。它计划一个函数在指定的时间后执行一次。例如，以下代码将在 2 秒后打印一条消息：

setTimeout(() => {
  console.log("Hello, world!");
}, 2000);

• setInterval()：重复执行

另一方面，setInterval() 是一个重复执行的计时器。它在给定的时间间隔内不断执行一个函数。例如，以下代码将每秒打印一次消息：

setInterval(() => {
  console.log("Tick-tock!");
}, 1000);

如何使用 setTimeout() 模拟 setInterval()

虽然 setInterval() 提供了重复执行的便利，但有时候我们可能需要使用 setTimeout() 来模拟它。我们可以通过创建一个递归函数来实现这一点，该函数将在回调函数执行后重新设置 setTimeout()。

function mySetInterval(callback, interval) {
  setTimeout(() => {
    callback();
    mySetInterval(callback, interval);
  }, interval);
}

清除计时器：保持控制

在使用计时器时，重要的是能够清除它们，以避免不必要的执行。对于 setTimeout()，我们无法直接清除它。然而，我们可以保存返回的计时器 ID，并将其传递给 clearTimeout() 来清除它。对于 setInterval()，我们直接使用 clearInterval() 来清除它。

何时使用哪个计时器

• 需要一次性执行： 使用 setTimeout()。
• 需要重复执行： 使用 setInterval()。
• 需要模拟 setInterval()： 使用我们前面提到的自定义函数。

常见问题解答

1. setTimeout() 和 setInterval() 的主要区别是什么？

   • setTimeout() 是一个一次性计时器，而 setInterval() 是一个重复执行的计时器。

2. 如何在 JavaScript 中清除计时器？

   • 对于 setTimeout()，使用 clearTimeout(timerId)；对于 setInterval()，使用 clearInterval(timerId)。

3. 什么时候应该使用 setTimeout() 模拟 setInterval()？

   • 当不需要精确的重复执行间隔时。

4. setTimeout() 会保证在指定的时间间隔内执行回调函数吗？

   • 不，它不会。JavaScript 的单线程性质可能会导致延迟。

5. 如何确保 setInterval() 在指定的时间间隔内执行回调函数？

   • 不幸的是，在 JavaScript 中没有完全可靠的方法。然而，一些库（如 requestAnimationFrame）提供了更好的近似值。