簡單介紹

在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()來取消該定時器。

用法

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

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() 是根據指定的時間周期性執行。

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