JavaScript 防抖和节流

概念

防抖（Debounce）是指在事件触发后，只有在经过设定的时间间隔内没有再次触发，事件处理器才会执行。防抖限制事件的触发时间间隔，避免事件被频繁触发。这适用于在搜索框输入建议、调整窗口大小、表单验证、表单提交等场景。

节流（Throttle）则是指在一定时间间隔内，不论事件触发多少次，事件处理器只执行一次。节流控制执行时间间隔，降低事件的执行频率。这适用于页面滚动加载、鼠标移动、游戏角色控制、实时数据图表更新等场景。

注意：事件触发≠函数执行。触发在执行前。

比如，我反馈了一个Bug，但是该Bug不一定在被修复。

疑问：防抖和节流都可用于控制事件处理函数的执行频率，那它们能否互相替代？

防抖是为了确保多次触发、一次执行，只关注最终状态；节流是为了确保函数的周期性执行，更关注过程中的均匀响应。

故防抖、节流不能完全互相替代，也就是说它两的应用场景是有所侧重的。

比如，对于搜索框输入建议这个场景，理应使用防抖而非节流，理由：我们监听的是输入事件，且应该在用户输入完想要输入的内容后再给出建议，若使用节流，就可能在用户还没输入完成时给出了无效建议。

实现

防抖实现

（1）防抖开始时不调用，结束时才调用。

function debounce(func, delay = 0){
 let timer = null;
 return function(){
 clearTimeout(timer);
 timer = setTimeout(()=>{
 func.apply(this, arguments);
 }, delay);
 }
}

（2）防抖开始时立即调用，结束时也调用。

// func 是待防抖函数
// delay 是最短执行时间间隔，单位 ms
// options 是额外配置，包括首次调用立即执行
function debounce(func, delay, options = {}) {
 let timer; // 计时器 ID
 const { leading = false } = options; // 默认首次调用不立即执行
 const debounced = function (...args) {
 // 保留执行时上下文
 const context = this;
 // 首次调用执行
 if (leading && !timer) func.apply(context, args);
 
 // 控制触发时间间隔的关键点
 clearTimeout(timer);
 timer = setTimeout(()=>{
 // 避免重复执行，首次调用执行了尾部延迟结束就不再执行
 if (!leading) func.apply(context, args);
 
 timer = null;
 }, delay);
 };
	// 取消防抖的功能函数
 debounced.cancel = () => {
 clearTimeout(timer);
 timer = null;
 };
 return debounced;
}

为什么要在更新 timer 为null前执行 clearTimeout？

更新 timer 为null不会使得timer关联的计时器失效。

节流实现

（1）时间戳版本：强调在节流开始时就会调用函数，节流结束时不调用。

function throttle(func, delay = 0){
 let lastExecTime = 0;
 
 return function(){
 let context = this;
 let args = arguments;
 let remaining = delay - (Date.now() - lastExecTime);
 if(remaining < 0){
 func.apply(context, args);
 lastExecTime = Date.now();
 }
 }
}

（2）定时器版本：关注点在节流结束时再调用函数，而开始时不会调用函数。

function throttle(func, delay = 0){
 let timer = null;
 
 return function(){
 let context = this;
 let args = arguments;
 if(!timer){
 timer = setTimeout(()=>{
 timer = null;
 func.apply(context, args);
 }, delay);
 }
 }
}

（3）合并版本：结合使用时间戳和定时器，节流开始和结束时都会执行。

// option 配置项：
// - leading：在节流开始时执行
// - trailing：在节流结束后执行
function throttle(func, delay = 0, option = {}){
 let timer = null;
 let lastExecTime = 0;
 const { leading = true, trailing = true } = option;
 
 const throttled = function(...args) {
 const context = this;
 const remaining = delay - (Date.now() - lastExecTime);
 if(leading && remaining < 0) {
 lastExecTime = Date.now();
 if(timer){
 clearTimeout(timer);
 timer = null;
 }
 func.apply(context, args);
 }
 else if(trailing && remaining >= 0 && !timer) {
 timer = setTimeout(()=>{
 lastExecTime = Date.now();
 timer = null;
 func.apply(context, args);
 }, remaining);
 }
 }
 return throttled;
}

应用示例：

?对鼠标移动事件添加节流：

window.addEventListener('mousemove', throttle(function(){
 console.log('鼠标移动');
}, 1000));