JavaScript 定時器

四冥發表於2021-11-08
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);

相關文章