簡單介紹
在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);