所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间,直到执行时间结束才可以再去触发执行第二次。
所谓节流,就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。间隔时间通常是固定的!
俩者区别
防抖与节流最大的区别在于防抖俩次成功执行的事件中间的间隔时间不一定固定不变,因为存在重置的情况,而节流的间隔时间是固定不变的,是不会受到间隔期点击而重置计时的影响
函数防抖一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次。防抖在频繁操作过程中会清楚上次的执行时间重新进行计算,从而只执行一次,类似于人进入电梯时电梯关门时间的处理
简单来说:你对事件3秒内执行10次的话,防抖是3秒结束后执行最后一次事件,而节流的话,假如指定节流时间1秒,那就是3秒你点了10次也只会执行3次。
// 防抖
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
export function debounce(fn, delay) {
let timer = null
return function () {
if (timer) {
clearTimeout(timer)
console.log('拦截')
}
timer = setTimeout(() => {
console.log('发送')
fn.apply(this, arguments)
timer = null
}, delay)
}
}
// 节流
/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒,防抖期限值
*/
export function throttle(fn, delay) {
let timer = null
return function () {
if (timer) {
console.log('拦截');
return
}
timer = setTimeout(() => {
console.log('发送');
fn.apply(this, arguments)
timer = null
}, delay)
}
}