当前位置：首页 > news >正文

JavaScript 防抖（Debounce）与节流（Throttle）

news 2025/8/16 18:46:06

在 JavaScript 前端开发中，处理高频率事件（如窗口调整、输入框输入、页面滚动）时，如果不加以控制，会导致性能问题，如页面卡顿或资源浪费。防抖（Debounce）和节流（Throttle）是两种优化策略，用于减少事件触发频率，提升用户体验和性能。

一、防抖（Debounce）详解

防抖的核心思想是：确保事件触发后，在指定延迟时间内不再触发新事件，才执行函数。如果延迟时间内再次触发事件，则重新计时。这避免了连续触发导致的多次执行，适用于需要“等待用户停止操作”的场景。

1.原理
防抖基于一个计时器（Timer）机制。当事件首次触发时，设置一个定时器（延迟时间为 tt 毫秒）。如果在 tt 毫秒内事件再次触发，则清除之前的定时器并重新设置；只有当 tt 毫秒内无新事件触发时，定时器到期后函数才执行。数学上，这相当于确保函数只在事件序列的“最后一次”触发后执行。
例如：用户输入搜索框时，防抖确保只在停止

2.实现代码
以下是 JavaScript 的防抖函数实现（使用 ES6 语法），包含详细注释：

/*** 防抖函数实现* @param {Function} fn - 需要防抖的函数* @param {number} delay - 延迟时间（毫秒）* @returns {Function} - 返回一个新的防抖函数*/
function debounce(fn, delay) {let timerId = null; // 用于存储定时器IDreturn function(...args) {// 如果已有定时器，则清除它（确保只执行最后一次）if (timerId !== null) {clearTimeout(timerId);}// 设置新定时器：延迟时间后执行原函数timerId = setTimeout(() => {fn.apply(this, args); // 使用 apply 确保 this 上下文正确timerId = null; // 执行后重置定时器ID}, delay);};
}// 使用示例
const handleSearch = debounce(function(event) {console.log('Searching:', event.target.value);// 实际应用：发送搜索请求
}, 500); // 延迟500毫秒document.querySelector('#search-input').addEventListener('input', handleSearch);

代码解释：
- debounce 函数接收一个函数 fn 和延迟时间 delay。
- 内部使用 setTimeout 管理计时器：每次事件触发，先清除旧计时器，再设置新计时器。
- 使用 apply 确保目标函数 fn 的 this 和参数正确传递。
- 示例中，输入框的 input 事件被防抖处理：用户停止输入500毫秒后，才执行搜索逻辑。

3.应用场景

搜索框输入：用户输入停止后执行搜索，避免频繁请求服务器1。
窗口调整（resize）：只在用户停止调整窗口大小时更新布局，减少重绘开销3。
表单验证：用户停止输入后才验证，而不是每次按键都触发5。
按钮防重复点击：防止用户快速多次点击提交按钮，导致重复提交4。

二、节流（Throttle）详解

节流的核心思想是：在固定时间间隔内，无论事件触发多少次，只执行一次函数。这保证了函数的执行频率可控，适用于需要“均匀执行”的场景。

1.原理
节流使用一个时间戳或计时器来控制执行频率。假设时间间隔为 t 毫秒：当事件首次触发时，立即执行函数并记录时间戳；之后每次触发事件，检查当前时间与上次执行时间的差值，如果差值小于 t，则忽略；如果大于或等于 t，则执行函数并更新时间戳。数学上，这确保函数在时间轴上的执行间隔至少为 t。
例如：页面滚动时，节流确保滚动事件每100毫秒只处理一次，保持动画流畅。

2.实现代码
以下是 JavaScript 的节流函数实现（使用时间戳方式），包含详细注释：

/*** 节流函数实现（时间戳版本）* @param {Function} fn - 需要节流的函数* @param {number} interval - 时间间隔（毫秒）* @returns {Function} - 返回一个新的节流函数*/
function throttle(fn, interval) {let lastExecTime = 0; // 上次执行时间戳return function(...args) {const now = Date.now(); // 当前时间戳// 如果当前时间与上次执行时间差大于间隔，则执行函数if (now - lastExecTime >= interval) {fn.apply(this, args); // 执行函数lastExecTime = now; // 更新上次执行时间}};
}// 使用示例
const handleScroll = throttle(function() {console.log('Scrolling...');// 实际应用：加载更多内容或更新动画
}, 100); // 每100毫秒最多执行一次window.addEventListener('scroll', handleScroll);

代码解释：
- throttle 函数接收一个函数 fn 和时间间隔 interval。
- 使用 Date.now() 记录时间戳：每次事件触发，比较当前时间与上次执行时间。
- 如果时间差超过 interval，则执行函数并更新时间戳；否则忽略。
- 示例中，滚动事件被节流处理：每100毫秒最多触发一次，避免频繁计算。

3.应用场景

页面滚动（scroll）：控制滚动事件处理频率，优化无限加载或动画性能。
游戏或动画控制：确保按键事件（如射击或移动）在固定帧率下执行，避免卡顿。
鼠标移动事件（mousemove）：在拖拽操作中，限制更新频率，提升流畅度。
API 请求限流：防止用户快速点击导致服务器过载。

三、防抖与节流的区别

防抖和节流都用于优化高频事件，但核心机制不同：

防抖：侧重于“等待稳定状态”，只在事件停止触发后执行一次。适合处理突发性连续事件（如输入框输入），减少不必要的计算。
节流：侧重于“控制执行频率”，在固定间隔内强制执行一次。适合处理持续性事件（如滚动或动画），保证流畅性。

简单对比：

特性	防抖（Debounce）	节流（Throttle）
核心思想	多次触发，最后一次生效	固定时间内只触发一次
执行时机	延迟后执行（等待无新事件）	立即或间隔后执行（保证频率）
适用场景	搜索输入、窗口调整	滚动加载、按钮点击限流
数学模型	函数执行延迟到事件序列末端	函数执行间隔 tt 毫秒