JavaScript 定時器詳情

Posted on by

1、簡單介紹

在JavaScript中定時器有兩個 setInterval() 與 setTimeout() 分別還有取消定時器的方法。
這都是window的對象，調用時可以省略window。這兩個方法並不在 JavaScript 的規范中。

定時器方法相關方法有四種：

方法 描述
setInterval 周期性地調用一個函數(function)或者執行一段代碼。
clearInterval 取消掉用setInterval設置的重復執行動作。
setTimeout 在指定的延遲時間之後調用一個函數或者執行一個代碼片段。
clearTimeout 方法可取消由 setTimeout() 方法設置的 timeout。

註意：setTimeout() 隻執行一次setInterval()是每間隔給定的時間周期性執行。

2、setInterval

2.1 描述

setInterval() 方法可以按照制定的周期，來重復調用一個函數或執行一個代碼段。周期單位為毫秒。
setInterval() 方法如果沒有被 clearInterval() 方法關閉或頁面關閉，那麼會一直調用下去。
setInterval的參數有多個。
第一種，如果第一個參數為代碼段，那麼setInterval()方法可以選填。
第二種，如果第一個參數為函數，那麼setInterval()方法可以有多個參數。

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

2.2 參數

參數 必/選填 描述
func | code 必填 調用的函數後要執行的函數或代碼字符串
delay 必填 執行代碼前所需的時間，單位為毫秒，可以不填，默認值是 0
arg1，arg2… 選填 要傳入被執行函數（或代碼字符串）的參數列表（IE9 以下不支持）

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

2.3 返回值

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

2.4 用法

這是一個點擊按鈕，每隔一秒種，數字加一的示例；

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

3、setTimeout

3.1 描述

setTimeout()返回一個整數，表示定時器的編號，以後可以用來取消這個定時器。
setTimeout()允許我們將函數推遲到一段時間間隔之後再執行。

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

3.2 參數

setTimeout()參數這裡和setInterval()的參數是一樣的。

參數 必/選填 描述
func | code 必填 調用的函數後要執行的函數或代碼字符串
delay 必填 執行代碼前所需的時間，單位為毫秒，可以不填，默認值是 0
arg1，arg2… 選填 要傳入被執行函數（或代碼字符串）的參數列表（IE9 以下不支持）

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

3.3 用法

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>

4、取消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所設置的定時器。

5、在控制臺使用定時器

在瀏覽器控制臺中也可以使用定時器

console.time(timerName)

創建一個名為name的計時器，並開始計時。

註意： 每一個計時器必須擁有唯一的名字，頁面中最多能同時運行10,000個計時器。

console.timeEnd(timerName)

調用console.timeEnd(name)停止計時器並輸出所耗時間（毫秒）。

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

5.1 用法

for循環99999次要多少時間示例：

console.time(name);

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

console.timeEnd(name);

到此這篇關於JavaScript 定時器 詳情的文章就介紹到這瞭,更多相關JavaScript 定時器 內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：