这两个名次早前听小伙伴们说起过,大概了解他们是性能优化的方式,但是没有在项目里用过,最近联想到项目里的一些场景,觉得把这个两个东西用上去效果应该会好一些,就做了一些尝试。
防抖动
正常情况下,事件触发不会很频繁,比如按钮点击这种,不可能一秒点击几十次,但是在某些情况下,事件却会频发触发。比如监听滚动事件,拖拽事件等,只要你的手不抖,秒秒钟好几十次是没问题的。
但是,事件并不需要触发这么多次。
比如在我的项目里,监听了窗口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