这两个名次早前听小伙伴们说起过，大概了解他们是性能优化的方式，但是没有在项目里用过，最近联想到项目里的一些场景，觉得把这个两个东西用上去效果应该会好一些，就做了一些尝试。
防抖动
正常情况下，事件触发不会很频繁，比如按钮点击这种，不可能一秒点击几十次，但是在某些情况下，事件却会频发触发。比如监听滚动事件，拖拽事件等，只要你的手不抖，秒秒钟好几十次是没问题的。
但是，事件并不需要触发这么多次。
比如在我的项目里，监听了窗口resize事件：
window.addEventListener('resize', this.onWindowResize);
onWindowResize() {
console.log('window resize...');
const { dispatch } = this.props;
dispatch({
type: 'dnotebook/setState',
payload: {
bodyWidth: document.body.clientWidth,
bodyHeight: document.body.clientHeight,
},
});
this.forceUpdate();
}
在调整窗口大小时，会不停的执行onWindowResize方法；
但其实用户进行调整动作时关心的只是最终态，所以完全可以等用户手停下来时再触发事件执行。
怎么做呢？
const debounce = (handler, delay) => {
let timmer = null;
return function () {
clearTimeout(timmer);
timmer = setTimeout(() => {
handler();
}, delay);
};
};
export default debounce;
window.addEventListener('resize', debounce(this.onWindowResize, 500));
第一次看到这段代码的时候我很疑惑，认为每次resize都会执行一下debounce函数，这样根本就不能达到“防抖”效果。后来问了两个小伙伴，其中一个还被我的思路带偏了，索性另一个比较清醒，原来是：
// debounce 只会执行一次，返回的匿名函数作为真正的回调函数
// js 遇到f()就会去执行了
window.addEventListener('resize', debounce(this.onWindowResize, 500));
// debounce是回调函数
window.addEventListener('resize', debounce);
解决了这个疑惑之后再来看看debounce。其实非常简单，就是借助闭包+定时器。
debounce执行的时候初始化一个timmer = null;
每次执行回调都清除了上一次的timmer，并超时调用handler;
第一次执行回调, 半秒后handler被加入事件队列，在这半秒内如果又有触发，那么就把上一次的清掉了，再次半秒后handler把加入事件队列，循环往复，所以其实是之前的都作废了，只有最后一次的触发能被有效执行。
这个逻辑完美解决了回调时间频繁执行的问题。
接下来看看节流阀。
节流阀
防抖动很好的忽略掉了前面无效动作，但是有时我们需要一触发马上就开始执行回调，再次触发时看看是否在同一个周期内，如果再那就把事件排到末尾暂缓执行，如果不在一个周期哪了则立马执行，这样保证一个周期内至少有一次执行，至于这个周期就是自己定了。
节流阀，是一个阀门，想想一个带阀门的水池，打开阀门开始放水，每隔1秒放下闸门，只要闸门一开，水又立即放出来。
比如，在我的项目中，按下shift+enter需要立即执行代码，但是执行代码这个动作并不能很快完成，那么当上一次执行还在进行中时，很快又按下了一个shift+enter, 这样就会导致问题了。
怎么做呢？
var throttle = function(func,delay){
var timer = null;
// 初始化一个开始时间
var startTime = Date.parse(new Date());
// 以上三句代码只会被执行一次 每次触发事件执行的是return回去的函数
return function(){
console.log('---start', startTime);
var curTime = Date.parse(new Date());
// 计算剩余时间
var remaining = delay-(curTime-startTime);
var context = this;
var args = arguments;
clearTimeout(timer);
if(remaining<=0){ // 上一个周期内已经完了
func.apply(context,args);
startTime = Date.parse(new Date());
}else{// 还在同一个周期内
timer = setTimeout(func,remaining);
}
}
}
一般情况下，程序2s之内能执行完，那么把周期设置成2s。
notebook.addEventListener('keydown', throttle(handler, 2000));
但是这样做还有一个问题：2s之内还没执行完，下一个周期的事件又发起了，而上一次的执行还没被中断，还有可能收集执行结果片段，两次执行的结果会重复显示，所以每次执行代码之前应该中断上一次的执行，并把上一次的执行结果清空。
// 中断执行
interruptKernel = () => {
const { socket } = this.props;
socket.emit('interrupt');
};
// 单步运行
runStep = needGoNext => {
this.needGoNext = needGoNext;
this.interruptKernel();
// 置空结果对象
this.msgObj = {};
const { focusLine } = this.props;
this.run(focusLine);
};
总结
防抖动和节流阀本质上都是减少频繁触发的手段，不同的地方是防抖会忽略最后一次触发之前的所有触发，而节流阀可以保证一个周期内执行一次，而且是触发后立即执行。
参考
- [防抖动、节流阀函数]https://www.jianshu.com/p/a5745a673a04
- [JS中的节流和去抖动]https://www.jianshu.com/p/cad9e3e779e2
网友评论