防抖和节流
导语
防抖：主打一个你敢触发我就敢罢工
节流：主打一个你触发你的我执行我的
一、 关于防抖(debounce)
防抖概念
当你频繁触发事件时，只会执行最后一次触发的事件，如果在指定的延迟时间内有新事件触发，则会重新开始延时。
防抖特性
如果在指定的延时时间内频发且持续触发新事件，则传入的函数不会执行直到延迟时间到期之后执行。
应用场景
- 输入框的搜索事件频率控制
- 输入框输入事件测频率控制
代码实现
function debounce(fn, delay) {
let timer = null;
return function(){
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
fn.apply(this,arguments);
timer = null
}, delay)
}
}
二、 关于节流(throttle)
节流概念
顾名思义，节流就是控制事件触发频率，即使在延时时间内频繁触发，也只会按指定的延时时间有规律的执行
节流特性
传入的事件会有规律的执行无法被频繁触发，在延时时间内即使触发了n次，也只会执行1次。
应用场景
- 页面滚动事件频率限制
- 按钮点击事件频率限制
代码实现
function(fn, delay) {
let timer = null;
return function(){
if(!timer){
timer = setTimeout(() => {
fn.apply(this,arguments);
timer = null
},delay)
}
}
}
三、 两者的区别
如果在一段时间内超频繁触发了n次事件：
- 传入debounce的函数只会在停止触发后执行1次（主打一个你敢触发我就敢罢工）
- 而传入throttle的函数会每隔delay时间后执行一次(主打一个你触发你的我执行我的)。
