使用場景 ： resize、scroll干发、mousemove 、onChange 等需要持續(xù)觸發(fā)的事件 避免浪費(fèi) 不必要的資源 可以避免掉一些小的卡頓
防抖：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)史翘，如果在這n秒內(nèi)又被觸發(fā)枉长，則重新計(jì)時。
function debounce(fun,delay){
let id = null;
return ()={
clearTimeout(id)
id = setTimeout(function () {
fun()
}, delay)
}
}
// 事件延遲執(zhí)行
節(jié)流：規(guī)定在一個單位時間內(nèi)琼讽，只能觸發(fā)一次函數(shù)必峰。如果這個單位時間內(nèi)觸發(fā)多次函數(shù)，只有一次生效钻蹬。
function throttle(fun, delay) {
let last, deferTimer
return function (args) {
let that = this
let _args = arguments
let now = +new Date()
if (last && now < last + delay) {
clearTimeout(deferTimer)
deferTimer = setTimeout(function () {
last = now
fun.apply(that, _args)
}, delay)
}else {
last = now
fun.apply(that,_args)
}
}
}
let throttleAjax = throttle(ajax, 1000)
let inputc = document.getElementById('throttle')
inputc.addEventListener('keyup', function(e) {
throttleAjax(e.target.value)
})
總結(jié) ：函數(shù)防抖是某一段時間內(nèi)只執(zhí)行一次吼蚁，而函數(shù)節(jié)流是間隔時間執(zhí)行。
debounce 防抖
search搜索聯(lián)想脉让，用戶在不斷輸入值時桂敛，用防抖來節(jié)約請求資源。
window觸發(fā)resize的時候溅潜，不斷的調(diào)整瀏覽器窗口大小會不斷的觸發(fā)這個事件术唬，用防抖來讓其只觸發(fā)一次
throttle 節(jié)流
鼠標(biāo)不斷點(diǎn)擊觸發(fā)，mousedown(單位時間內(nèi)只觸發(fā)一次)
監(jiān)聽滾動事件滚澜，比如是否滑到底部自動加載更多粗仓，用throttle來判斷
