JavaScript定时器详解：setInterval、setTimeout与console.time用法

简介

JavaScript提供了两种定时器机制：setInterval()与setTimeout()，并分别配有对应的取消方法。

它们属于window对象，调用时可直接省略window前缀。需要注意的是，这两个方法并未包含在JavaScript语言规范中。

定时器相关的方法主要包含四种。

setTimeout() 与setInterval()的主要区别在于执行次数不同。

需注意：setTimeout()仅执行一次，而setInterval()会按照给定的时间间隔周期性重复执行。

setInterval

描述

setInterval() 方法允许按照指定的周期重复调用函数或执行代码段，周期单位是毫秒。

setInterval() 方法如果没有被 clearInterval() 方法关闭或页面关闭，那么会一直调用下去。

setInterval支持多种参数形式。

第一种情况：若第一个参数为代码字符串，则setInterval()的其他参数可选填。

第二种情况：若第一个参数为函数，则setInterval()可以接受多个额外参数。

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

参数

参数func|code通常传入函数。尽管出于历史兼容原因支持传入代码字符串，但不建议这样做。

返回值

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

用法

以下示例演示点击按钮后，数字每隔一秒增加一：

<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>

setTimeout

描述

setTimeout()返回一个整数，表示定时器的编号，后续可用于取消该定时器。

setTimeout()允许将函数推迟到指定时间间隔之后执行。

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

参数

setTimeout()的参数与setInterval()的参数设置相同。

参数func|code通常传入函数。尽管出于历史原因支持传入代码字符串，但不建议这样做。

用法:

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>

取消定时器

clearInterval()方法用于取消由setInterval()设置的定时器。

clearTimeout()方法用于取消由setTimeout()设置的定时器。

使用方法简单，仅需一个参数，即timeoutID，该标识符由相应的setTimeout()或setInterval()调用返回。

clearInterval(intervalID);
clearTimeout(timeoutID);

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

用法很简单

function timer() {
  timerId = setTimeout(addNum, 1000);
}
 clearTimeout(timerId); // 当代码运行到这行的时候，会取消timer所设置的定时器。

在控制台使用定时器

浏览器控制台同样支持定时器功能。

console.time(timerName)

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

每个计时器必须拥有唯一名称，页面中最多可同时运行10,000个计时器。

console.timeEnd(timerName)

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

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

用法

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

console.time(name);
 let num;
for (let index = 0; index < 99999; index++) {
  num++;
}
 console.timeEnd(name);

总结

本文介绍至此，希望能为您提供帮助，也欢迎您关注本站更多内容！