防抖:
是指頻繁觸發(fā)的情況下仪壮，只有足夠的空閑時(shí)間绽榛，才執(zhí)行代碼一次
在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)推溃，則重新計(jì)時(shí)
防抖應(yīng)用場(chǎng)景：
- search搜索聯(lián)想届腐，用戶在不斷輸入值時(shí)铁坎，用防抖來節(jié)約請(qǐng)求資源犁苏。
- window觸發(fā)resize的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件围详，用防抖來讓其只觸發(fā)一次
// 函數(shù)防抖
const debounce = (fn, delay) => {
let timer = null
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
節(jié)流:
規(guī)定一個(gè)單位時(shí)間內(nèi)朴乖，只觸發(fā)一次函數(shù)
節(jié)流應(yīng)用場(chǎng)景：
- 鼠標(biāo)不斷點(diǎn)擊觸發(fā)助赞，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
- 監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多畜普，用throttle來判斷
// 函數(shù)節(jié)流
const throttle = (fn, delay = 500) => {
let flag = true
return (...args) => {
if (!flag) return
flag = false
setTimeout(() => {
fn.apply(this, args)
flag = true
}, delay)
}
}
document.body.addEventListener('scroll', throttle(foo, 2000));
