当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖与节流函数如何实现？

防抖与节流函数如何实现？

2025-12-10 16:24:32 0浏览收藏

推广推荐

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

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《防抖与节流函数怎么实现？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

防抖和节流是优化高频事件的两种手段。防抖通过延迟执行，确保事件停止触发后才执行一次回调，适用于搜索输入等场景；节流则保证在指定时间间隔内最多执行一次函数，适合滚动监听等需稳定频率的场景。两者核心区别在于：防抖关注最终状态，节流注重规律执行。根据需求选择可显著提升性能与体验。

JavaScript防抖与节流函数实现

在处理高频触发事件时，比如窗口缩放、滚动、输入框输入等，直接执行回调会导致性能问题。防抖（Debounce）和节流（Throttle）是两种常用的优化手段，用来控制函数的执行频率。

防抖（Debounce）

防抖的核心思想是：在事件被触发后，设置一个延迟，如果在这个延迟内事件再次被触发，则重新计时。只有当事件停止触发超过指定时间后，才会执行一次回调。

适用于搜索建议、按钮重复点击、窗口resize等场景。

示例实现：

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

使用方式：

const sayHello = () => console.log("Hello!");
const debouncedSayHello = debounce(sayHello, 500);
window.addEventListener('resize', debouncedSayHello);

节流（Throttle）

节流的核心思想是：规定一个单位时间，在这个时间内，最多只执行一次函数。无论事件触发多少次，函数都会按照固定间隔执行。

适用于滚动加载、鼠标移动、点击提交等需要稳定执行频率的场景。

示例实现（时间戳方式）：

function throttle(func, delay) {
  let previous = 0;
  return function (...args) {
    const now = Date.now();
    const context = this;
    if (now - previous >= delay) {
      func.apply(context, args);
      previous = now;
    }
  };
}

另一种实现（定时器方式）：

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

使用方式：

const logPosition = () => console.log(window.scrollY);
const throttledLog = throttle(logPosition, 100);
window.addEventListener('scroll', throttledLog);