回武漢隔離的第二天打卡,武漢加油,逆戰必勝!今天想和大家簡單聊一下js定時器的問題。
1.setTimeout 延時器 在指定時間后執行一次,注意只會執行一次
當然有的時候我們想用延時器做出定時器的效果,讓它一直執行也可以,就是反復調用函數自身即可,代碼如下:
fun();
function fun() {
console.log(1)
setTimeout("fun()",1000); //自身調用,重復執行
}
2.setInterval 定時器 在指定的時間間隔內重復的執行,如不清除,會一直執行下去
setInterval(function () {
console.log(1);
},1000)
3.值得注意的是在setTimerout
和setInterval
的使用中,如果傳入參數,那只能傳入函數名:
setInterval(fn,1000)
4.下面問題來了,當我們在執行定時器的過程當中,會發現一件有趣的事情,那就是定時器會累加,看下面的例子:
當我們多次點擊瀏覽器窗口時會發現,打印的速度越來越快,這就是我們所說的定時器累加。
var timer;
document.onclick = function() {
timer = setInterval(function(){
console.log(1)
},1000)
}
那么為什么會出現這樣的情況呢?咱們舉個例子,這就好像一個人每隔一秒鍾使用一次打印機,點兩下的話就相當於兩個人去使用這個打印機,他們是同時進行的,因此每一秒打印會有多於原來兩倍的速度。那么如何解決這個問題呢?
定時器累加問題的解決:先清除定時器,再使用定時器。代碼示例如下:
var timer;
document.onclick = function() {
clearInterval(timer)
timer = setInterval(function(){
console.log(1)
},1000)
}