函數(shù)節(jié)流：當(dāng)持續(xù)觸發(fā)事件時(shí)奏纪，保證一定時(shí)間段內(nèi)調(diào)用一次事件處理函數(shù)鉴嗤。比如一個(gè)input綁定一個(gè)oninput事件，input輸出內(nèi)容的時(shí)候每隔1000毫秒才會(huì)執(zhí)行一次亥贸。
下面我們介紹三種節(jié)流函數(shù)的封裝躬窜，前倆種都有一定的弊端。
<input id="inp"/>
function throttle(e) {
console.log(e.target.value)
}
inp.oninput=throttle(fn,1000)
// 第一種：當(dāng)輸入的時(shí)候不會(huì)立即執(zhí)行
function throttle (fn ,time) {
let timer = null
return function() {
if (!timer) {
timer = setTimeout(()=>{
fn.apply(null,arguments)
timer = null
},time)
}
}
}
// 第二種：第一次立即執(zhí)行一次, 有可能最后一次事件不執(zhí)行
function throttle (fn ,time) {
let startTime = 0
return function() {
let nowTime = Date.now()
if (nowTime - startTime >=time) {
fn.apply(null,arguments)
startTime = now
}
}
}
// 第三種：結(jié)合了前倆種的寫法炕置，我認(rèn)為這樣封裝相對(duì)完美
function throttle (fn ,time) {
let startTime = Date.now()
let timer = null
return function() {
let nowTime = Date.now()
clearTimeout(timer)
if (nowTime - startTime >= time){ // 時(shí)間范圍允許立即執(zhí)行
fn.apply(null,arguments)
startTime = Date.now()
}else {
timer = setTimeout(()=>{
fn.apply(null,arguments)
}, time)
}
}
}
