关键词

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() 函数使我们能够创建计时器,控制函数的执行时间。使用这两个函数之前,我们需要确定是否需要重复执行函数以及需要等待多长时间执行,也需要注意代码执行的顺序。

本文链接:http://task.lmcjl.com/news/10532.html

展开阅读全文