JavaScript 定时器详解：setInterval、setTimeout与清除机制

1、简单介绍

在JavaScript中，系统提供了两个主要的定时器方法： setInterval() 与setTimeout() ，它们各自拥有对应的取消定时器的方法。这些方法均属于window对象，因此在调用时可以直接省略window前缀。需要注意的是，这两个方法并不包含在JavaScript 的核心规范定义中。

与定时器相关的方法共有四种，具体功能如下所示：

需要特别注意：（即setTimeout）仅执行一次；而（即setInterval）则是按照给定的时间间隔周期性执行。

2、setInterval

2.1 描述

setInterval() 方法允许按照指定的周期重复调用一个函数或执行一段代码段，周期单位通常为毫秒。如果setInterval() 方法未被clearInterval() 方法关闭，或者页面未关闭，该定时器将持续运行下去。setInterval接收多个参数：第一种情况，若第一个参数为代码字符串，则后续参数可选填；第二种情况，若第一个参数为函数，则setInterval可接受多个额外参数。

let timerId = setInterval(func|code, delay, arg1, arg2, ...)

2.2 参数

注意：参数func|code通常传入的是函数。尽管出于历史兼容性考虑，该方法支持传入代码字符串，但官方并不建议这种做法。

2.3 返回值

返回值timeoutID是一个正整数，代表定时器的唯一编号。该编号可用于传递给clearTimeout()，从而取消对应的定时器。

2.4 用法

以下示例演示了点击按钮后，每隔一秒数字自动加一的功能：

<p id="showNum"></p>
<button onclick="timer()">点我每秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId; // 计时器的ID
  let num = 0;

  function timer() {
    timerId = setInterval(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

  // 没有写停止计时器代码
</script>

3、setTimeout

3.1 描述

setTimeout()返回一个整数，即定时器的编号，后续可通过该编号取消定时器。setTimeout()允许我们将函数的执行推迟到指定的时间间隔之后。

let timerId = setTimeout(func|code, delay, arg1, arg2, ...)

3.2 参数

setTimeout()的参数设置与setInterval()的参数完全一致。

注意：参数func|code通常传入的是函数。尽管出于历史兼容性考虑，该方法支持传入代码字符串，但官方并不建议这种做法。

3.3 用法

setTimeout()的使用方式与 setInterval()相同，

区别在于setTimeout() 仅执行一次，而setInterval() 则是根据指定的时间间隔周期性执行。

<p id="showNum"></p>
<button onclick="timer()">点击后，等待一秒钟数字加一</button>

<script>
  const showNum = document.getElementById("showNum");

  let timerId;
  let num = 0;
  addNum();

  function timer() {
    timerId = setTimeout(addNum, 1000);
  }

  function addNum() {
    showNum.innerText = `${num++}`;
  }

</script>

4、取消timer

clearInterval() 方法用于取消由 setInterval() 设置的timer。clearTimeout() 方法用于取消由setTimeout() 设置的timer。

使用方法十分简单，仅需一个参数，即timeoutID，它代表要取消的定时器的标识符。该ID由相应的setTimeout()或clearTimeout()调用返回。

clearInterval(intervalID);
clearTimeout(timeoutID);

注意：setTimeout()和setInterval()共用一个编号池。从技术层面讲，clearTimeout()和clearInterval()可以互换使用。但为了避免代码混淆，建议不要混用取消定时器的函数。

用法示例如下：

function timer() {
  timerId = setTimeout(addNum, 1000);
}

clearTimeout(timerId); // 当代码运行到这行的时候，会取消timer所设置的定时器。

5、在控制台使用定时器

在浏览器控制台中同样可以使用定时器功能。

console.time(timerName)

创建一个名为name的计时器，并开始计时。

注意：每一个计时器必须拥有唯一的名字，页面中最多能同时运行10,000个计时器。

console.timeEnd(timerName)

调用console.timeEnd(name)停止计时器并输出所耗时间（毫秒）。

console.time(timerName);
console.timeEnd(timerName);

5.1 用法

以下示例展示了执行99999次for循环所需的时间：

console.time(name);

let num;
for (let index = 0; index < 99999; index++) {
  num++;
}

console.timeEnd(name);

到此这篇关于JavaScript 定时器 详情的文章就介绍到这了,更多相关JavaScript 定时器 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！