JavaScript如何實現定時器

這篇文章給大家分享的是有關JavaScript如何實現定時器的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

簡單介紹

在JavaScript中定時器有兩個 setInterval() 與 setTimeout() 分別還有取消定時器的方法。

這都是window的對象，調用時可以省略window。這兩個方法并不在 JavaScript 的規范中。

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

setTimeout() 與setInterval()的區別是它們的執行次數不同。

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

setInterval

描述

setInterval() 方法可以按照制定的周期，來重復調用一個函數或執行一個代碼段。周期單位為毫秒。

setInterval() 方法如果沒有被 clearInterval() 方法關閉或頁面關閉，那么會一直調用下去。

setInterval的參數有多個。

第一種，如果第一個參數為代碼段，那么setInterval()方法可以選填。

第二種，如果第一個參數為函數，那么setInterval()方法可以有多個參數。

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

參數

參數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 一般傳入的都是函數。由于某些歷史原因，支持傳入代碼字符串，但是不建議這樣做。

用法:

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

感謝各位的閱讀！關于“JavaScript如何實現定時器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！