JavaScript 定时器详情

JavaScript 定时器是一种可以按照指定时间间隔循环执行代码的机制。它可以使得开发者对页面进行自动化控制，从而使得网站的交互更加丰富和动态。

JavaScript 定时器包括两种类型：setInterval() 和 setTimeout()。setInterval() 方法会按照指定的时间间隔重复执行一段代码，而 setTimeout() 方法则会在指定的延迟时间结束后执行代码一次。

setInterval()

setInterval() 方法的语法如下：

setInterval(function, delay, parameter1, parameter2, ...)

其中：

• function：必选。指定要执行的函数或者代码字符串。
• delay：必选。指定间隔的毫秒数。
• parameter1, parameter2, ...：可选。传递给 function 的参数。

如果我们想每隔一秒钟向页面输出 "Hello World!"，可以使用以下代码：

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

这段代码将会每秒钟向控制台输出一次 "Hello World!"。

setTimeout()

与 setInterval() 不同，setTimeout() 方法只会执行一次。它的语法如下：

setTimeout(function, delay, parameter1, parameter2, ...)

其中的参数含义与 setInterval() 相同。

我们可以使用 setTimeout() 实现一个倒计时计时器，如下：

function countDown(time) {
  console.log(time);
  if (time > 0) {
    setTimeout(function() {
      countDown(time - 1);
    }, 1000);
  }
}

countDown(10);

这段代码将会从 10 开始倒数，每秒钟输出一个数值，最后输出 0。

注意事项

• 尽可能使用 setInterval() 和 setTimeout() 两种定时器之一，避免直接使用 while 或者 for 循环等方式造成页面卡死。
• 定时器的间隔时间必须为正整数，否则将会被当做 0 处理。
• 如果定时器的代码执行时间超过了间隔时间，下一次定时器就会在上一次代码执行结束后立即执行，这可能会导致定时器事件堆积。因此应该尽量确保定时器的代码执行时间小于间隔时间。