JS的定時器相關的API有四個,分別是setTimeout、clearTimeout、setInterval、clearInterval。其中 setTimeout和clearTimeout是一組,setInterval 和 clearInterval是一組。
setTimeout
設置一個定時器,定時器在定時器到期後執行一個函數或指定的一段代碼
let timerId = setTimeout(function[,delay,arg1,...,argn])
let timerId = setTimeout(code[,delay])
參數説明:
function: 定時器到期(delay毫秒)想要執行的函數
code[不推薦]: 定時器到期(delay毫秒)想要執行的字符串
delay[可選]:延遲的毫秒數,函數或者代碼的執行在該延遲之後發生。如果不傳值,則默認為0.注意:實際的延長時間可能會比期待的時間要長
arg1,...,argn[可選]:附加參數,定時器到期後會作為參數傳給函數。
返回值:
返回值timerId是一個正整數,表示定時器的編號,可以傳給clearTimeout,用來取消該定時器。
setInterval
設置一個時間間隔,每隔固定的時間間隔,重複的調用一個函數或指定的一段代碼
let timerId = setInterval(function,delay[,arg1,...,argn])
let timerId = setInterval(code,delay)
參數説明:
function:每隔固定的間隔時間需要重複執行的函數
code[不推薦]:每隔固定的時間間隔需要重複執行的一段代碼
delay:每次延遲的毫秒數,函數的每次調用會在該延遲之後發生。當參數值小於10的時候,會默認使用10.和setTimeout相同,實際的延長時間可能會更長
arg1,...,argn[可選]:附加參數,定時器到期後會作為參數傳給函數
返回值:
返回值timerId是一個正整數,表示定時器的編號,可以傳給clearInterval,用來取消定時器。
定時器使用的場景
重複執行repeat
例如: 每個10ms輸出一段指定的文字
function repeat(func, count = 0, delay = 10) {
return function () {
let repeatCount = 0;
let args = arguments;
let timerId = setInterval(() => {
if (repeatCount++ < count) {
func.apply(null, args)
} else {
clearInterval(timerId)
}
}, delay)
return timerId;
}
}
防抖函數debounce
防抖:在事件被觸發n秒後再執行回調,如果在n秒內又被觸發,則重新計時
function debounce(func, delay) {
let timerId = null;
let self = this;
return (...args) => {
if (timerId) {
clearTimeout(timerId);
}
timerId = setTimeout(() => {
func.apply(self, args);
},delay)
}
}
節流函數throttle
節流:規定在n秒內只能觸發一次函數,多次觸發只會響應一次
function throttle(func, delay) {
let timerId = null;
let self = this;
return (...args) => {
if (timerId) {
return;
}
timerId = setTimeout(() => {
func.apply(self, args);
clearTimeout(timerId)
}, delay)
}
}
參考文檔:
setTimeout MDN
setInterval MDN
https://johnresig.com/blog/how-javascript-timers-work/
徹底弄懂函數防抖和函數節流