乐趣区

关于javascript:JavaScript-定时器

jiezi

简略介绍

在 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);
退出移动版