乐趣区

关于javascript: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);
退出移动版