先說區(qū)別
防抖在高頻事件過程中只會(huì)執(zhí)行一次撕予，且執(zhí)行的是最后一次，而節(jié)流在高頻事件中可能會(huì)執(zhí)行多次欠母，并且至少執(zhí)行一次吆寨，說白了就是間隔一段時(shí)間執(zhí)行一次
防抖
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)啄清，則重新計(jì)時(shí)辣卒。
function debounce(fun,time){
let timer = null; // 每次先重置timer，否則每次點(diǎn)擊都會(huì)新增一個(gè)新的setTimeout荣茫，且不能達(dá)到我們多次點(diǎn)擊只執(zhí)行一次的效果。
return function(){
clearTimeout(timer)
let args = arguments
timer=setTimeout(()=>{
fun.apply(this,args) // 修改this指向港准，需要考慮到執(zhí)行函數(shù)的參數(shù)咧欣，對(duì)于參數(shù)而言，使用arguments處理不同的參數(shù)该押。
},time)
}
}
節(jié)流
規(guī)定在一個(gè)單位時(shí)間內(nèi)蚕礼，只能觸發(fā)一次函數(shù)。如果這個(gè)單位時(shí)間內(nèi)觸發(fā)多次函數(shù)奠蹬，只有一次生效。
function throttle(fun,time){
var _lastTime = null;
return function(){
var _nowTime = +new Date();//當(dāng)前時(shí)間
if (_nowTime - _lastTime > time || !_lastTime) {
fn.apply(this, arguments); //將this和參數(shù)傳給原函數(shù)
_lastTime = _nowTime;
}
}
}
結(jié)合應(yīng)用場(chǎng)景
- debounce
search搜索聯(lián)想冀痕，用戶在不斷輸入值時(shí)，用防抖來節(jié)約請(qǐng)求資源僻他。
window觸發(fā)resize的時(shí)候腊尚，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次
- throttle
鼠標(biāo)不斷點(diǎn)擊觸發(fā)婿斥，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多娇妓，用throttle來判斷
