加载
执行
防抖与节流
在监听用户输入、拖拽、滚动等这类触发极为频繁的事件时，如果监听函数中有比较复杂的逻辑或大幅修改 DOM ，那么很可能造成页面卡顿，影响用户体验，因此需要控制事件监听函数的实际执行频率，这就是防抖与节流技术。
防抖
- 事件触发时，通过 setTimeout 函数延迟执行
- 如果在延迟事件内再次触发了事件，那么取消之前的延迟函数，以当前事件为准再次设置延迟函数
- 直到延迟时间内没有再次触发事件，监听函数才会真正执行
节流
- 事件触发时，通过 setTimeout 函数延迟执行
- 如果在延迟时间内再次触发了事件，那么忽略新触发的事件
- 直到延迟时间，监听函数才会真正执行，执行完毕后，新的事件才能被接收
代码实现
/**
* 节流/防抖包装函数
* @param {Function} handler event handler
* @param {String} type debouce or throttle
* @param {Number} delay time to delaly
*/
function optimize(handler, type='debounce', delay=300){
let _this = this;
let timer = null;
if(type === 'debounce'){
return function(){
if(timer){
clearTimeout(timer)
}
timer = setTimeout(()=> {
handler.apply(_this, arguments)
timer = null
}, delay)
}
}else if(type === 'throttle'){
return function(){
if(timer) return
timer = setTimeout(()=>{
handler.apply(_this, arguments)
timer = null
}, delay)
}
}
}
