setInterval 与 setTimeout：您应该使用哪个？-js教程-PHP中文网

setInterval 与 setTimeout：您应该使用哪个？

王林

发布： 2024-08-16 08:38:02

原创

982 人浏览过

setInterval vs setTimeout: ¿Cuál deberías usar?

如果您使用过 JavaScript，您肯定在某个时候遇到过 setInterval 和 setTimeout。这两种方法就像神奇的工具一样，告诉您的代码何时在一段时间后或每隔一定时间间隔执行某些操作。但是什么时候应该使用其中一种而不是另一种呢？？

setTimeout 和 setInterval 是什么？

在决定使用哪一个之前，值得记住每一个的用途。

想象一下 setTimeout 作为一段时间后响起的闹钟。你告诉它要等待多长时间，然后，繁荣，它就会运行该函数。但他只做了一次。

  setTimeout(() => {
      console.log("¡Hola después de 2 segundos!");
  }, 2000);

登录后复制

这里，那个“你好！” 2秒后出现，然后就结束了，该功能不再重复。

对于setInterval来说，它就像一个闹钟，每隔几分钟就会响一次，直到你将其关闭。你告诉它重复之间要等待多长时间，它就会继续执行该函数，直到你告诉它停止。

  setInterval(() => {
      console.log("¡Hola cada 2 segundos!");
  }, 2000);

登录后复制

在这种情况下，该消息将每 2 秒出现一次，不间断，直到您使用clearInterval 函数停止间隔。

什么时候应该使用setTimeout？

当您希望某件事只发生一次但不是立即发生时，setTimeout 是您最好的朋友。以下是一些超级有用的情况：

短暂停：也许您需要在运行动画之前等待几秒钟，或者您可能想在显示它之前给一些时间来加载。
异步流程：有时需要等待一段时间才能进行复杂操作的下一步。

因此，如果您在运行某项操作之前只需要一点延迟，setTimeout 是您的选择。

那么 setInterval 呢？

如果您需要某些事情重复发生，就像一个永不停止滴答作响的时钟，那么 setInterval 就是您想要的。以下是 setInterval 的一些亮点示例：

时钟和计时器：想象一个每秒更新时间的时钟或倒计时器。
持续检查：不时检查您的应用程序中是否有新消息、更新或是否有更改。
实时更新：每隔几秒用新数据刷新页面内容。

如果您需要让某些事情定期发生，那么 setInterval 就是您的最佳选择。

关于性能的一些事情

值得一提的是，setTimeout 和 setInterval 都不是万无一失的。如果您的应用程序非常繁忙，计时器可能会延迟，特别是当您同时运行许多事情时。并且要小心 setInterval，因为如果您在其中执行的操作花费的时间超过您设置的间隔，函数就会开始累积，这就是问题开始的时候。

为了避免这种情况，有些人更喜欢递归地使用 setTimeout 而不是 setInterval，因为这可以让您更好地控制下一个函数的执行时间：

function ejecutarCada2Segundos() {
    console.log("¡Hola cada 2 segundos!");
    setTimeout(ejecutarCada2Segundos, 2000);
}

ejecutarCada2Segundos();

登录后复制

但是，如果您决定使用 setInterval，则必须知道如何停止间隔以防止其无限期地继续运行。这就是clearInterval 发挥作用的地方。此方法允许您停止活动间隔。这是一个简单的例子：

const intervalo = setInterval(() => {
    console.log("¡Hola cada 2 segundos!");
}, 2000);

// Detener el intervalo después de 10 segundos
setTimeout(() => {
    clearInterval(intervalo);
    console.log("Intervalo detenido");
}, 10000);

登录后复制

在此示例中，消息“Hello every 2秒！”将重复 10 秒。此后，clearInterval 负责停止间隔，并在控制台中显示消息“间隔已停止”。