JavaScript防抖节流实现_JavaScript性能优化实战

防抖和节流是前端优化高频事件的两种技术。防抖通过延迟执行，仅在事件停止触发后执行一次，适用于搜索输入等场景；节流则保证单位时间内最多执行一次，适合滚动监听等需规律响应的场景。两者均减少函数调用频率，提升性能。

在前端开发中，频繁触发事件（如窗口滚动、输入框输入、鼠标移动）会导致性能问题。为优化这类场景，防抖（Debounce）和节流（Throttle）是两种常用的技术手段。它们能有效控制函数执行频率，减少资源消耗，提升页面响应速度。

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

防抖的核心思想是：当事件被触发后，设置一个延迟定时器；如果在延迟时间内事件再次被触发，则清除原定时器并重新计时。只有在连续触发结束后，目标函数才会执行一次。

这适用于搜索框输入建议、窗口大小调整等只需关注最终结果的场景。

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

立即学习“Java免费学习笔记（深入）”；

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

使用方式：

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function(e) {
  console.log('搜索请求发送:', e.target.value);
}, 300));

节流（Throttle）：固定时间间隔内最多执行一次

节流确保函数在指定时间间隔内最多执行一次。无论事件触发多频繁，只要达到时间阈值就允许执行，其余触发被忽略。

大师兄智慧家政

58到家打造的AI智能营销工具

99

查看详情

适合处理高频但需保持响应节奏的操作，比如页面滚动监听、按钮点击防重复提交。

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

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

使用方式：

window.addEventListener('scroll', throttle(function() {
  console.log('当前滚动位置:', window.scrollY);
}, 100));

如何选择防抖与节流？

关键看业务需求：

• 需要“等用户停下来再处理” → 用防抖（如实时搜索）
• 需要“规律性地响应” → 用节流（如监控滚动进度）

两者都能显著降低函数调用次数，避免重绘重排带来的性能损耗，是JavaScript性能优化中的基础技巧。

基本上就这些，掌握好防抖和节流，能让交互更流畅，也能减轻服务器压力。不复杂但容易忽略细节，建议封装成工具函数复用。

以上就是JavaScript防抖节流实现_JavaScript性能优化实战的详细内容，更多请关注php中文网其它相关文章！