当前位置：首页 > 文章列表 > 文章 > 前端 > 事件节流与防抖实现方法详解

事件节流与防抖实现方法详解

2025-12-22 20:58:35 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

本篇文章给大家分享《事件节流与防抖的实现方法解析》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

节流是每隔一段时间执行一次，防抖是等事件停止触发一段时间后才执行。节流通过记录上次执行时间控制频率，适用于滚动监听等场景；防抖通过清除并重启定时器将多次触发合并为一次，适用于搜索输入等需等待操作结束的场景。两者均用于优化高频事件处理，提升性能与用户体验。

JavaScript中的事件节流（Throttling）与防抖（Debouncing）如何实现？

事件节流（Throttling）和防抖（Debouncing）是JavaScript中优化高频事件执行的常用技术，比如窗口滚动、调整大小、输入框输入等场景。它们都能控制函数执行频率，但机制不同。

什么是事件节流（Throttling）

节流的目的是在指定时间间隔内，最多只执行一次函数。即使事件被频繁触发，回调函数也会按固定频率执行。

实现思路：记录上次执行时间，每次触发时判断当前时间与上次执行时间的差值，超过设定间隔才允许执行，并更新执行时间。

示例代码：

function throttle(fn, delay) {
    let lastExecTime = 0;
    return function (...args) {
      const now = Date.now();
      if (now - lastExecTime > delay) {
        fn.apply(this, args);
        lastExecTime = now;
      }
    };
  }
<p>// 使用示例
window.addEventListener('scroll', throttle(() => {
console.log('节流：滚动事件触发');
}, 1000));
</p>

什么是防抖（Debouncing）

防抖的目的是将多次触发合并为最后一次执行。只要事件持续触发，函数就不会执行，只有当事件停止触发一段时间后才执行一次。

常见于搜索框输入、窗口调整等需要“等待用户操作结束”的场景。

示例代码：

function debounce(fn, delay) {
    let timer = null;
    return function (...args) {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn.apply(this, args);
      }, delay);
    };
  }
<p>// 使用示例
document.getElementById('searchInput').addEventListener('input', debounce((e) => {
console.log('防抖：执行搜索', e.target.value);
}, 300));
</p>