当前位置：首页 > 文章列表 > 文章 > 前端 > 防抖节流实现与优化技巧解析

防抖节流实现与优化技巧解析

2026-01-04 18:48:50 0浏览收藏

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《防抖节流实现与性能优化技巧》，聊聊，希望可以帮助到正在努力赚钱的你。

防抖和节流是优化高频事件的两种手段。防抖通过延迟执行，仅在事件停止触发后运行一次，适用于搜索输入等场景；节流则保证函数在设定时间间隔内最多执行一次，适合滚动监听、鼠标移动等持续触发的场景。两者核心区别在于执行时机与频率控制方式不同，合理使用可显著提升性能。

防抖与节流实现_javascript性能优化

在 JavaScript 开发中，频繁触发的事件（如窗口滚动、窗口缩放、输入框输入、鼠标移动等）容易造成性能问题。防抖（debounce）和节流（throttle）是两种常用的优化手段，用于控制函数执行频率，减少不必要的调用，提升页面响应速度与性能。

防抖（Debounce）：只执行最后一次操作

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

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

示例：实现一个简单的防抖函数

function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

使用方式：

const debouncedSearch = debounce(() => {
console.log('执行搜索');
}, 300);

绑定到输入框事件即可避免每次输入都发起请求。

节流（Throttle）：固定时间执行一次

节流的策略是：无论事件触发多频繁，确保函数在指定的时间间隔内最多执行一次。比如每 100ms 最多执行一次处理函数。

适合用于鼠标移动、滚动加载、拖拽等高频但不需要实时响应的场景。

示例：实现一个基于时间戳的节流函数

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

使用方式：

window.addEventListener('scroll', throttle(() => {
console.log('滚动中，但不会太频繁');
}, 100));