概述
函数防抖是指将多次触发合并成一次执行，一般情况下都是合并到最后一次触发执行。函数节流是指在一段时间内执行一次，有可能触发在开始位置，也有可能在这段时间结束位置。其目的都是减少系统消耗，缩减执行频率，提升系统整体执行效率。
浏览器兼容事件处理程序
const EventUtil = {
register(el, type, handler) { //事件注册
if (el.addEventListener) {
el.addEventListener(type, handler, false); //false事件冒泡阶段触发
} else if (el.attachEvent) {
el.attachEvent(`on${type}`, handler);
} else {
el[`on${type}`] = handler;
}
},
remove(el, type, handler) { //删除事件回调
if (el.removeEventListener) {
el.removeEventListener(type, handler, false);
} else if (el.detachEvent) {
el.detachEvent(`on${type}`, handler);
} else {
el[`on${type}`] = null;
}
}
}
函数防抖Debounce
// 加入要监听页面鼠标滚动事件
// 正常绑定
const handler = function (e) { console.log("scroll"); } //事件触发后执行的代码
EventUtil.register(window, "scroll", handler); //注册事件
//控制台会不停的打印 scroll ，这样的话触发太频繁了
// 防抖写法，设置定时器，丢弃原先触发，只执行最后一次触发，使触发不这么频繁。重点在于最后一次
const debounce = (handler, delay) => { // 设置只在触发后delay时间内没有再次触发该事件才执行handler
let timer = null; // 保存一个计时器
return event => {
clearTimeout(timer); //如果再次触发，先取消上次的计时器
timer = setTimeout(_ => handler(event), delay);
}
}
EventUtil.register(window, "scroll", debounce(handler, 2000));
函数节流Throttle
// 所有的触发中，从计时器开始一定时间后（内）才执行一次，执行后重新计时。重点在于时间段内
const throttle = (handler, delay) => {
let startTime = new Date().getTime();
return function () {
const currentTime = new Date().getTime();
if (currentTime - startTime > delay) {
startTime = new Date().getTime();
handler.apply(this, arguments); //这里绑定this
}
}
}
可以看出，防抖和节流都会丢弃一些触发，但是有些关键触发也被丢弃了。比如在防抖中，如果该事件一直触发，可能存在回调函数永远不能被执行的情况，而在节流（上文中的那种写法）中，如果过delay设置的2s，当我在1s的时间内不停触发，而2s后再也不触发，也会造成回调函数从不调用的情况。所以需要将防抖和节流相结合，拦截关键触发点，调用回调函数。
函数防抖和节流组合
const DebounceThrottle = (handler, delay) => {
let startTime = new Date().getTime();
let timer = null;
return function () {
let currentTime = new Date().getTime();
if (currentTime - startTime > delay) { // 节流 (如果时间段到了，则执行回调)
clearTimeout(timer);
startTime = new Date().getTime();
handler.apply(this, arguments);
} else { // 防抖 (时间端没有到，记录最后一次，delay后调用回调)
clearTimeout(timer);
timer = setTimeout(_ => {
startTime = new Date().getTime();
handler.apply(this, arguments);
}, delay);
}
}
}
