定時器
JavaScript提供定時執(zhí)行代碼的功能,叫做定時器(timer),主要由setTimeout()和setInterval()這兩個函數(shù)來完成。兩者都是全局屬性
一、setTimeout()
setTimeout函數(shù)用來指定某個函數(shù)或某段代碼,在多少毫秒之后執(zhí)行幼衰。它返回一個整數(shù),表示定時器的編號缀雳,以后可以用來取消這個定時器渡嚣。
語法:var tinmerId = setTimeout(func|code,delay)
第一個參數(shù)是將要執(zhí)行的函數(shù)或者一段代碼,第二個參數(shù)是推遲執(zhí)行的毫秒數(shù)肥印。
var timer = setTimeout(function(){console.log('hello')},1000)//返回一個編號(19)识椰,一秒后輸出“hello”
setTimeout(function(){console.log('hello')},1000)//返回一個編號(20),一秒后輸出“hello”
var timer = setTimeout(function(){console.log('hello')},10000)//返回一個編號(21)深碱,10秒后輸出“hello”
clearTimeout(timer)//可以在還沒有輸出時腹鹉,停止執(zhí)行
clearTimeout(22)//可以直接清除編號
立即返回的是延遲的編號,下次可以直接調(diào)用編號
setInterval()
與setTimeout用法完全一致敷硅,setInterval指定某個任務(wù)每間隔一段時間執(zhí)行一次功咒,是無限次的定時執(zhí)行愉阎。
var timer = setInterval(function(){
console.log(new Date())
},1000)
//每隔一秒,輸出當(dāng)前時間
clearInterval(timer)//清除
運行機(jī)制
將指定代碼移出本次執(zhí)行 力奋,等到下一輪Event Loop時榜旦,再檢查 是否到了指定時間。如果到了景殷,就政治性對應(yīng)的代碼溅呢;如果沒到,就等下一輪Event Loop時重新判斷 滨彻。
瀏覽器一般有最小時間間隔(4-10毫秒)藕届,設(shè)置的時間是盡可能的貼近挪蹭,而不是嚴(yán)格的執(zhí)行時間亭饵。
異步和回調(diào)
函數(shù)節(jié)流
設(shè)置一個定時器,先判斷是否有定時器梁厉,沒有的話就設(shè)置一個辜羊,有的話就清除上一次的再重新設(shè)置一個定時器
var timer
function hiFrequency() {
if(timer) {
clearTimerout(timer)
} //第一次timer沒有值,不執(zhí)行词顾;如果不足1秒又執(zhí)行了一次八秃,就清除timer的值
timer = setTimerout(function(){
console.log('hello world')
},1000) //一秒后輸出,不足1秒再次執(zhí)行就會先運行上面代碼清除肉盹,只輸出最后一次超過1秒沒有繼續(xù)執(zhí)行的代碼
hiFrequency()
hiFrequency()
hiFrequency()
}
優(yōu)化上面代碼:
function throttle(fn,delay){
var timer = null
return function(){ //返回一個函數(shù)
clearTimeout(timer)
timer = setTimeout(function(){
fn(arguments)
},delay)
}
}
function fn(){
console.log('hello')
}
var fn2 = throttle(fn,1000)//執(zhí)行的是返回的函數(shù)
fn2()
fn2()
fn2()