使用防抖与节流优化高频事件处理

题目描述
在前端开发中，我们经常需要处理一些高频触发的事件，比如窗口滚动（scroll）、输入框输入（input）、鼠标移动（mousemove）等。如果这些事件的回调函数包含复杂计算或DOM操作，频繁执行会导致页面卡顿甚至崩溃。防抖（Debounce）和节流（Throttle）是两种常用的优化技术，用于控制函数执行频率，提升性能。

解题过程

1. 理解高频事件的性能问题

   • 以搜索框输入为例：用户连续输入"hello"时，会触发5次input事件
   • 若每次输入都向服务器发送请求，会造成4次无效请求（等待最后一次输入完成再请求即可）
   • 原生事件处理无法自动控制频率，需通过防抖/节流实现智能调度

2. 防抖（Debounce）的实现原理

   • 核心思想：在事件触发后等待一段时间再执行函数，若在等待期内再次触发则重新计时
   • 生活案例：电梯关门时有人进入则重新计时关门
   • 适用场景：
     • 搜索框联想词（等待用户停止输入后再请求）
     • 窗口大小调整（停止调整后重新计算布局）

3. 实现基础防抖函数

   function debounce(func, wait) {
     let timeoutId;
     return function (...args) {
       clearTimeout(timeoutId); // 清除之前设置的定时器
       timeoutId = setTimeout(() => {
         func.apply(this, args);
       }, wait);
     };
   }
   
   // 使用示例
   const searchInput = document.getElementById('search');
   searchInput.addEventListener('input', debounce(function(e) {
     console.log('发送请求:', e.target.value);
   }, 500));
   

4. 节流（Throttle）的实现原理

   • 核心思想：固定时间间隔内只执行一次函数，如同水滴匀速滴落
   • 生活案例：地铁每2分钟发一班车，不因排队人数改变频率
   • 适用场景：
     • 滚动加载更多（每隔200ms检查位置）
     • 鼠标移动轨迹记录（固定频率采样）

5. 实现时间戳版节流函数

   function throttle(func, interval) {
     let lastTime = 0;
     return function (...args) {
       const now = Date.now();
       if (now - lastTime >= interval) {
         func.apply(this, args);
         lastTime = now;
       }
     };
   }
   
   // 使用示例
   window.addEventListener('scroll', throttle(function() {
     console.log('计算位置:', window.scrollY);
   }, 200));
   

6. 升级版节流：兼顾首尾执行

   function advancedThrottle(func, interval, { leading = true, trailing = true } = {}) {
     let lastTime = 0;
     let timer = null;
   
     return function (...args) {
       const now = Date.now();
   
       // 首次立即执行控制
       if (!lastTime && !leading) lastTime = now;
   
       const remaining = interval - (now - lastTime);
   
       if (remaining <= 0) {
         if (timer) {
           clearTimeout(timer);
           timer = null;
         }
         func.apply(this, args);
         lastTime = now;
       } else if (trailing && !timer) {
         timer = setTimeout(() => {
           func.apply(this, args);
           lastTime = !leading ? 0 : Date.now();
           timer = null;
         }, remaining);
       }
     };
   }
   

7. 性能对比实验

   // 测试代码：统计函数执行次数
   let count = 0;
   const testFunc = () => count++;
   
   // 原始事件：快速滚动3秒触发300次
   // 防抖版本：停止滚动后仅触发1次
   // 节流版本(200ms)：最多触发15次（3000ms/200ms）
   

8. 特殊场景优化技巧

   • 防抖加强版：支持立即执行（如搜索框首次输入立即响应）
   • 节流自适应：根据设备性能动态调整间隔时间
   • 双向绑定优化：Vue/React中使用lodash的debounce方法

总结
防抖适用于"等待稳定状态后执行"的场景，节流适用于"均匀稀释执行频率"的场景。通过合理设置时间参数，可以有效平衡用户体验与性能需求，是前端性能优化的必备技能。