事件节流与防抖原理及实现解析

事件节流与防抖是前端开发中优化高频事件（如滚动、输入、窗口缩放）性能的关键技术：节流通过限制函数在固定时间间隔内最多执行一次，确保定期响应，适用于需持续反馈的场景；防抖则将连续触发合并为最后一次静默期后的执行，精准匹配“用户操作结束再处理”的需求，如实时搜索。二者机制迥异却目标一致——减少冗余计算、降低资源消耗、显著提升页面流畅度与用户体验，掌握其原理与适用边界，是构建高性能Web应用的必备技能。

事件节流（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>

节流与防抖的区别

• 节流：保证在一定时间内至少执行一次，适合需要定期响应的场景，如滚动监听上报行为。
• 防抖：只在静止期后执行一次，适合等待用户操作完成再处理，如输入后搜索。

简单记：节流是“每隔一段时间执行”，防抖是“等你不点了再执行”。

基本上就这些。根据实际需求选择合适的方式，能显著提升性能和用户体验。

到这里，我们也就讲完了《事件节流与防抖原理及实现解析》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！