1、簡單介紹

在JavaScript中定時(shí)器有兩個(gè) setInterval() 與 setTimeout() 分別還有取消定時(shí)器的方法。
這都是window的對象，調(diào)用時(shí)可以省略window。這兩個(gè)方法并不在 JavaScript 的規(guī)范中。

定時(shí)器方法相關(guān)方法有四種：

注意：setTimeout() 只執(zhí)行一次setInterval()是每間隔給定的時(shí)間周期性執(zhí)行。

2、setInterval

2.1 描述

setInterval() 方法可以按照制定的周期，來重復(fù)調(diào)用一個(gè)函數(shù)或執(zhí)行一個(gè)代碼段。周期單位為毫秒。
setInterval() 方法如果沒有被 clearInterval() 方法關(guān)閉或頁面關(guān)閉，那么會(huì)一直調(diào)用下去。
setInterval的參數(shù)有多個(gè)。
第一種，如果第一個(gè)參數(shù)為代碼段，那么setInterval()方法可以選填。
第二種，如果第一個(gè)參數(shù)為函數(shù)，那么setInterval()方法可以有多個(gè)參數(shù)。

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

2.2 參數(shù)

注意：參數(shù)func|code 一般傳入的都是函數(shù)。由于某些歷史原因，支持傳入代碼字符串，但是不建議這樣做。

2.3 返回值

返回值timeoutID是一個(gè)正整數(shù)，表示定時(shí)器的編號(hào)。這個(gè)值可以傳遞給clearTimeout()來取消該定時(shí)器。

2.4 用法

這是一個(gè)點(diǎn)擊按鈕，每隔一秒種，數(shù)字加一的示例；

<p id="showNum"></p>
<button onclick="timer()">點(diǎn)我每秒鐘數(shù)字加一</button>

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

  let timerId; // 計(jì)時(shí)器的ID
  let num = 0;

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

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

  // 沒有寫停止計(jì)時(shí)器代碼
</script>

3、setTimeout

3.1 描述

setTimeout()返回一個(gè)整數(shù)，表示定時(shí)器的編號(hào)，以后可以用來取消這個(gè)定時(shí)器。
setTimeout()允許我們將函數(shù)推遲到一段時(shí)間間隔之后再執(zhí)行。

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

3.2 參數(shù)

setTimeout()參數(shù)這里和setInterval()的參數(shù)是一樣的。

注意：參數(shù)func|code 一般傳入的都是函數(shù)。由于某些歷史原因，支持傳入代碼字符串，但是不建議這樣做。

3.3 用法

setTimeout()用法和 setInterval()是一樣的，

不過 setTimeout() 只執(zhí)行一次不同，setInterval() 是根據(jù)指定的時(shí)間周期性執(zhí)行。

<p id="showNum"></p>
<button onclick="timer()">點(diǎn)擊后，等待一秒鐘數(shù)字加一</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() 設(shè)置的 timer。
clearTimeout() 方法可取消由 setTimeout() 設(shè)置的 timer。

使用方法很簡單,只有一個(gè)參數(shù)，該參數(shù)timeoutID為您要取消定時(shí)器的標(biāo)識(shí)符。
該ID由相應(yīng)的setTimeout()或clearTimeout()調(diào)用返回.

clearInterval(intervalID);
clearTimeout(timeoutID);

注意：注意的是setTimeout()和setInterval()共用一個(gè)編號(hào)池，技術(shù)上，clearTimeout()和 clearInterval() 可以互換。但是，為了避免混淆，不要混用取消定時(shí)函數(shù)。

用法很簡單：

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

clearTimeout(timerId); // 當(dāng)代碼運(yùn)行到這行的時(shí)候，會(huì)取消timer所設(shè)置的定時(shí)器。

5、在控制臺(tái)使用定時(shí)器

在瀏覽器控制臺(tái)中也可以使用定時(shí)器

console.time(timerName)

創(chuàng)建一個(gè)名為name的計(jì)時(shí)器，并開始計(jì)時(shí)。

注意： 每一個(gè)計(jì)時(shí)器必須擁有唯一的名字，頁面中最多能同時(shí)運(yùn)行10,000個(gè)計(jì)時(shí)器。

console.timeEnd(timerName)

調(diào)用console.timeEnd(name)停止計(jì)時(shí)器并輸出所耗時(shí)間（毫秒）。

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

5.1 用法

for循環(huán)99999次要多少時(shí)間示例：

console.time(name);

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

console.timeEnd(name);

到此這篇關(guān)于JavaScript 定時(shí)器 詳情的文章就介紹到這了,更多相關(guān)JavaScript 定時(shí)器 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論