防抖函數(shù)
定義： 多次觸發(fā)事件后生闲，事件處理函數(shù)只執(zhí)行一次赵辕，并且是在觸發(fā)操作結(jié)束時(shí)執(zhí)行
例：監(jiān)聽頁面滾動心包， 滾動時(shí)不會觸發(fā)事件處理函數(shù)履因， 而是在滾動完成后一段時(shí)間障簿， 觸發(fā)事件回調(diào)
// 代碼封裝
function debounce (callback, delay) {
let timer
return function (...arg) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
callback.apply(this,arg)
}, delay)
}
}
// 調(diào)用
window.onscroll = debounce (function (e) {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(e)
console.log(`滾動條位置：${scrollTop}`)
}, 10)
節(jié)流函數(shù)
定義： 觸發(fā)函數(shù)事件后盹愚，短時(shí)間間隔內(nèi)無法連續(xù)調(diào)用栅迄，只有上一次函數(shù)執(zhí)行后，過了規(guī)定的時(shí)間間隔皆怕，才能進(jìn)行下一次的函數(shù)調(diào)用毅舆。
例： 監(jiān)聽頁面滾動， 定義每隔500ms觸發(fā)一次回調(diào)事件
// 代碼封裝
function throttle (callback, delay) {
let flag = true
return function (...arg) {
if (flag) {
flag = false
setTimeout(function () {
callback.apply(this, arg)
flag = true
}, delay)
}
}
}
// 調(diào)用
window.onscroll = throttle(function (e) {
let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
console.log(e)
console.log(`滾動條位置：${scrollTop}`)
}, 10)
轉(zhuǎn)自https://blog.csdn.net/qq867263657/article/details/89208887
