JavaScript 函数节流与防抖：概念区分、实现原理及 Lodash 应用详解

在JavaScript开发中，函数节流与防抖是两种常见的高频事件处理策略。许多开发者虽然能写出相关代码，却容易混淆两者的适用场景或核心机制。本文旨在厘清这两者的区别，通过回顾与总结，帮助读者在实际开发中准确选择并应用，确保代码执行的稳定性与效率。需特别说明的是，网络搜索结果中关于两者的定义常存在混淆甚至相反的情况，本文内容基于原创实践整理，旨在提供准确的技术参考。

节流概念 (Throttle)

节流的核心机制是：在设定的时间间隔内，函数仅执行一次。例如，设定延迟为200ms，意味着在鼠标移动（mousemove）过程中，无论触发频率多高，回调函数只会每隔200ms执行一次。若未达到设定的时间间隔，函数将直接返回，不会执行后续的回调逻辑。这种“固定频率执行”的特性是节流的关键。

节流主要适用于那些触发频率极高且需要持续响应的场景，典型的例子包括滚动事件（scroll）和触摸移动事件（touchmove）。在这些场景中，限制执行频率可以有效降低浏览器重绘和重排的压力，提升页面性能。

防抖概念 (Debounce)

防抖的核心机制是：只有当连续触发事件的间隔时间超过设定值时，函数才会执行一次。这里的“停止触发”是指从最后一次触发点开始计时，若间隔时间达到设定值，则执行回调。如果在设定时间内持续触发事件，且每次触发的间隔都小于设定时间，那么回调函数将永远不会被执行。简而言之，防抖是“最后一次触发后等待一段时间再执行”。

防抖主要适用于那些需要等待用户操作完成后再进行响应的场景，例如输入框验证（input validation）、搜索联想功能（search suggestion）以及窗口大小调整（resize）。在这些场景中，避免在用户输入或调整过程中频繁执行昂贵计算或网络请求至关重要。

节流实现

实现节流的基本思路是利用一个状态变量来控制执行。首次执行时，将该变量设为true（或存在定时器）；后续执行时，检查该变量，若为true则直接返回，阻止重复执行。当首次执行的定时器完成后，将变量重置为false（或清空定时器）。这样，下一次触发时，变量为false，函数得以再次执行，从而形成周期性的执行节奏。

代码一：首次不执行

function throttle(fn,delay=100){
 //首先设定一个变量，在没有执行我们的定时器时为null
 let timer = null;
 return function(){
 //当我们发现这个定时器存在时，则表示定时器已经在运行中，需要返回
 if(timer) return;
 timer = setTimeout(()=>{
 fn.apply(this,arguments);
 timer = null;
 },delay);
 }
}

代码二：首次执行

function throttle2(fn,delay=100){
 let last = 0;
 return function(){
 let curr = +new Date();
 if(curr - last > delay){
 fn.apply(this,arguments);
 last = curr;
 }
 }
}

防抖实现

实现防抖的基本思路是利用定时器来控制执行时机。首次运行时，将定时器引用赋值给一个变量；后续执行时，若距离上次触发的时间间隔未超过设定值，则清除当前定时器并重新设置一个新的定时器。如此反复，直到用户停止触发操作。当没有新的清除操作发生时，超过设定时间后，定时器到期，回调函数得以执行。

代码一：首次不执行

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

代码二：首次执行

function debounce2(fn, delay = 200, atBegin = true) {
 let timer = null, last = 0,during;
 return function () {
 let self = this, args = arguments;
 var exec = function () {
 fn.apply(self, args);
 }
 if (atBegin && !timer) {
 exec();
 atBegin = false;
 } else {
 during = Date.now() - last;
 if (during > delay) {
 exec();
 } else {
 if (timer) clearTimeout(timer);
 timer = setTimeout(function () {
  exec();
 }, delay);
 }
 }
 last = Date.now();
 }
}

上述代码仅为简化实现，旨在展示核心逻辑。在实际生产环境中，建议使用成熟的第三方库（如Lodash），因其经过广泛测试，能处理更多边界情况，降低Bug风险。若发现上述简化代码存在未覆盖的场景，欢迎指正。

若项目中仅需使用节流或防抖功能，可直接安装对应的NPM模块，如 `throttle` 和 `debounce`，以减小打包体积。

Lodash使用文档

Lodash库中的节流和防抖函数提供了丰富的配置参数，理解这些参数对于灵活应用至关重要。以下记录关键参数及其代码用法。

节流（throttle）

官方文档解释：

创建一个节流函数，该函数在 wait 秒内最多执行 func 一次。该函数提供一个 cancel 方法用于取消延迟的调用，以及一个 flush 方法用于立即执行。可以通过 options 对象配置 func 的调用时机：options.leading 和 options.trailing 分别决定在 wait 期间的前后是否触发。func 会接收最后一次调用时传入的参数，后续调用的返回值即为最后一次 func 调用的结果。

注意：如果 leading 和 trailing 都设定为 true，则 func 允许以 trailing 方式调用的前提是：在 wait 期间有多次调用发生。

如果 wait 为 0 且 leading 为 false，func 的调用将被推迟到下一个事件循环点，类似于 setTimeout 设置为 0 的效果。

参数

func (Function)
要节流的函数

[wait=0] (number)
需要节流的毫秒

[options] (Object)
选项对象

[options.leading=true] (boolean)
指定调用在节流开始前

[options.trailing=true] (boolean)
指定调用在节流结束后

返回值 (Function)

返回节流的函数

示例

// 避免在滚动时过分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));

// 点击后就调用 `renewToken`，但5分钟内超过1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);

// 取消一个 trailing 的节流调用
jQuery(window).on('popstate', throttled.cancel);

防抖（debounce）

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。debounced 函数同样提供 cancel 方法取消延迟调用，以及 flush 方法立即执行。可以通过 options 对象决定调用时机：options.leading 与 options.trailing 决定是“先调用后等待”还是“先等待后调用”。func 调用时会传入最后一次提供给 debounced 函数的参数。后续调用的 debounced 函数返回的是最后一次 func 调用的结果。

注意：如果 leading 和 trailing 选项均为 true，则 func 允许以 trailing 方式调用的前提是：在 wait 期间有多次调用防抖方法。

如果 wait 为 0 且 leading 为 false，func 的调用将被推迟到下一个事件循环点，类似于 setTimeout 设置为 0 的效果。

参数

func (Function)
要防抖动的函数

[wait=0] (number)
需要延迟的毫秒数

[options] (Object)
选项对象

[options.leading=false] (boolean)
指定调用在延迟开始前

[options.maxWait] (number)
设置 func 允许被延迟的最大值

[options.trailing=true] (boolean)
指定调用在延迟结束后

返回值 (Function)

返回具有防抖动功能的函数

示例

// 避免窗口在变动时出现昂贵的计算开销。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));

// 当点击时 `sendMail` 随后就被调用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
 'leading': true,
 'trailing': false
}));

// 确保 `batchLog` 调用1次之后，1秒内会被触发。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);

// 取消一个 trailing 的防抖动调用
jQuery(window).on('popstate', debounced.cancel);

以上即为JavaScript中节流与防抖的完整解析，涵盖概念区分、基础实现及Lodash的高级应用。希望这些内容能对您的学习与实践有所帮助，欢迎继续支持本站获取更多技术分享。