防抖函数是在单位时间(>1)随便触发多少次事件,只要这次触发的时间与上次触发的时间只差不到1s,都不执行;
节流函数是在单位时间(>1)随便触发多少次事件,只要过了1s,就会执行一次。
// 输入一个函数及要求做节流处理时间频率
// 返回一个具备节流效果的函数
export const throttle = function (fn, t) {
let timerId = null
function throttleDoSomething () {
if (timerId) {
return
}
timerId = setTimeout(() => {
fn.apply(this)
// fn()
timerId = null
}, t)
}
return throttleDoSomething
}
// 防抖函数
export const debounce = function (func, delay) {
let timer = null
return function (...args) {
// 取消已有的定时器(其实可以理解为,取消了上一次的函数调用)
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}
调用:
// debounceClick: 具有防抖效果的函数
debounceClick: debounce(function () {
// 执行
}, 1000),
// throttleInput: 具有节流效果的函数
throttleInput: throttle(function () {
// 执行
}, 1000),