JavaScript setInterval()与setTimeout()计时器

JavaScript setInterval()和setTimeout()计时器

在 JavaScript 中，我们可以使用 setInterval() 和 setTimeout() 两个内置函数来创建计时器，控制代码执行的时间间隔。

setInterval()

setInterval() 函数可以重复执行一个函数，并且每隔一定的时间间隔进行一次执行。函数接收两个参数：

• 第一个参数为要执行的函数函数名或匿名函数;
• 第二个参数为时间间隔，表示多少毫秒后函数重复执行。

示例：

let count = 0;

function counter() {
  console.log("Count: " + count);
  count++;
}

setInterval(counter, 1000);

上面的代码使用 setInterval() 函数每秒执行一次 counter 函数。在这个示例中，我们使用了一个计数器，每秒输出一个计数器的当前值。

setTimeout()

与 setInterval() 不同，setTimeout() 仅执行一次函数，它也接收两个参数：

• 第一个参数为要执行的函数函数名或匿名函数；
• 第二个参数表示在多少毫秒后执行。

示例：

function showMessage() {
  console.log("Hello, World!");
}

setTimeout(showMessage, 5000);

上面的代码中，setTimeout() 函数将会在 5 秒后执行 showMessage 函数，输出 "Hello, World!" 到控制台。

需要注意，setTimeout() 也可以通过返回值用来关闭计时器：

let timerId = setTimeout(function () {
  console.log("This won't run.");
}, 0);

clearTimeout(timerId);

上面的代码中 timerId 将不会执行，因为 clearTimeout() 函数取消了计时器。

使用计时器的注意事项

• 计时器函数的第一个参数应该是函数名或匿名函数；
• 计时器函数的第二个参数应该是毫秒数，表示函数执行的间隔时间；
• 计时器函数返回计时器 ID，用于关闭计时器；
• 计时器无法完全保证函数执行的时间间隔，可能存在略有出入的情况；
• 在关闭计时器之前，一定要确保您不会在计时器之外执行计时器的代码。

总结

setInterval() 和 setTimeout() 函数使我们能够创建计时器，控制函数的执行时间。使用这两个函数之前，我们需要确定是否需要重复执行函数以及需要等待多长时间执行，也需要注意代码执行的顺序。