防抖与节流的使用场景与实现
- 防抖
- 节流
防抖
防抖是一种常见的 JavaScript 技术,用于控制频繁触发的事件,例如窗口大小调整、鼠标移动、键盘输入等。防抖的目的是减少事件触发的频率,提高页面性能。
防抖原理是多次触发,只执行一次(类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒)。
下面是一个简单的防抖函数实现:
function debounce(func, delay) {let timer;return function(...args) {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {func.apply(this, args);}, delay);};
}
使用方法
const handleResize = debounce(() => {console.log('窗口大小发生变化');
}, 300);window.addEventListener('resize', handleResize);
在这个实现中:
debounce 函数接受两个参数:
func: 需要防抖的函数
delay: 防抖的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先检查是否有未完成的定时器,如果有则清除。
然后设置一个新的定时器,在 delay 毫秒后执行原始的 func 函数。
如果在 delay 毫秒内事件再次触发,则会重置定时器,从而达到防抖的效果。
节流
节流是另一种常见的 JavaScript 技术,用于控制频繁触发的事件。与防抖不同的是,节流会保证一个函数在一定时间内只执行一次。这在处理滚动、拖拽等高频率事件时非常有用。
节流的原理是立即触发,之后忽略用户操作,规定时间后才会再次触发(节流类似于英雄联盟里的英雄平A,一定时间内点击多次只进行攻击一次)
下面是一个简单的节流函数实现:
function throttle(func, delay) {let lastTime = 0;return function(...args) {const now = new Date().getTime();if (now - lastTime > delay) {lastTime = now;func.apply(this, args);}};
}
使用方法
const handleScroll = throttle(() => {console.log('页面滚动');
}, 500);window.addEventListener('scroll', handleScroll);
在这个实现中:
throttle 函数接受两个参数:
func: 需要节流的函数
delay: 节流的延迟时间(毫秒)
返回一个新的函数,这个新函数会在事件触发时被调用。
在新函数内部,首先获取当前的时间戳。
然后判断当前时间与上次执行时间的差值是否大于 delay。
如果大于 delay,则执行原始的 func 函数,并更新上次执行时间。
如果小于 delay,则不执行原始的 func 函数。