详解JavaScript的定时器

简单介绍

在javascript中定时器有两个 setinterval() 与 settimeout() 分别还有取消定时器的方法。

这都是window的对象，调用时可以省略window。这两个方法并不在 javascript 的规范中。

定时器方法相关方法有四种。

方法	描述
setinterval	周期性地调用一个函数(function)或者执行一段代码。
clearinterval	取消掉用setinterval设置的重复执行动作。
settimeout	在指定的延迟时间之后调用一个函数或者执行一个代码片段。
cleartimeout	方法可取消由 settimeout() 方法设置的 timeout。

settimeout() 与setinterval()的区别是它们的执行次数不同。

注意:settimeout() 只执行一次setinterval()是每间隔给定的时间周期性执行。

setinterval

描述

setinterval() 方法可以按照制定的周期，来重复调用一个函数或执行一个代码段。周期单位为毫秒。

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

setinterval的参数有多个。

第一种，如果第一个参数为代码段，那么setinterval()方法可以选填。

第二种，如果第一个参数为函数，那么setinterval()方法可以有多个参数。

let timerid = setinterval(func|code, delay, arg1, arg2, ...)

参数

参数	必/选填	描述
func | code	必填	调用的函数后要执行的函数或代码字符串
delay	必填	执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2…	选填	要传入被执行函数（或代码字符串）的参数列表（ie9 以下不支持）

参数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	必填	调用的函数后要执行的函数或代码字符串
delay	必填	执行代码前所需的时间，单位为毫秒，可以不填，默认值是 0
arg1，arg2…	选填	要传入被执行函数（或代码字符串）的参数列表（ie9 以下不支持）

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

取消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所设置的定时器。

在控制台使用定时器

在浏览器控制台中也可以使用定时器

console.time(timername)

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

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

console.timeend(timername)

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

console.time(timername);
console.timeend(timername);

用法

for循环99999次要多少时间示例.

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注的更多内容!