防抖和节流

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

一、防抖（Debounce）

概念
- 防抖是指当触发一个事件后，事件处理函数不会立即执行，而是等待一定时间后才执行。如果在这段时间内又触发了相同的事件，那么就重新开始计时，直到最后一次触发事件后经过指定的时间间隔，事件处理函数才会真正执行。（类似于王者荣耀回城，只要回城时被打断重新计时）
应用场景
- 搜索框输入实时搜索：当用户在搜索框中输入内容时，每次输入都会触发搜索请求。使用防抖可以在用户停止输入一段时间后再发起搜索请求，避免频繁的网络请求。
- 窗口大小调整：当用户调整窗口大小时，会频繁触发 resize 事件。使用防抖可以在用户停止调整窗口大小一段时间后再执行相应的布局调整操作，减少不必要的计算。

实现方式

以下是一个简单的防抖函数实现：

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

二、节流（Throttle）

概念
- 节流是指在一定时间内，无论事件触发多少次，事件处理函数只会执行一次。它通过限制函数的执行频率，确保在指定的时间间隔内函数最多执行一次。（类似王者荣耀里释放技能，一段时间只能释放一次，需要冷却技能）
应用场景
- 滚动事件监听：当用户滚动页面时，会频繁触发 scroll 事件。使用节流可以在滚动过程中每隔一定时间执行一次相应的操作，比如计算滚动位置、加载更多内容等，避免过于频繁的计算和网络请求。
- 鼠标移动事件：在某些需要实时跟踪鼠标位置的场景中，使用节流可以限制鼠标移动事件的处理频率，提高性能。

实现方式

以下是一个简单的节流函数实现：

function throttle(func, delay) {
     let timer = null;
     let lastExecutedTime = 0;
     return function() {
       const context = this;
       const args = arguments;
       const now = Date.now();
       if (!timer && now - lastExecutedTime >= delay) {
         func.apply(context, args);
         lastExecutedTime = now;
       } else if (!timer) {
         timer = setTimeout(() => {
           timer = null;
           if (now - lastExecutedTime >= delay) {
             func.apply(context, args);
             lastExecutedTime = now;
           }
         }, delay - (now - lastExecutedTime));
       }
     };
   }