节流函数的核心是控制函数在指定时间间隔内最多执行一次，通过闭包和定时器实现；2. 它适用于需要规律执行的场景，如滚动、窗口缩放、拖拽等事件；3. 与防抖不同，节流保证周期性执行，而防抖只在事件停止后执行一次；4. 生产级实现需考虑this上下文、参数传递、leading/trailing配置、取消机制及时间戳可靠性，确保函数健壮、灵活且无内存泄漏，最终返回一个可被安全调用的节流化函数。
在JavaScript里，要实现一个节流函数（throttle），核心就是控制一个函数在特定时间周期内最多执行一次。这就像给高速运转的机器装上一个限速器，避免它因为过载而崩溃，让它在一个设定的频率内稳定输出，而不是每次触发都立即响应。
解决方案
一个基础的节流函数实现，通常会利用闭包和定时器来管理函数的执行频率。下面是一个相对常见的实现方式，它兼顾了首次触发立即执行（leading edge）和最后一次触发也能执行（trailing edge）的场景：
function throttle(func, delay) {
let timeoutId = null; // 用于存储定时器ID
let lastArgs = null; // 用于存储最后一次调用的参数
let lastThis = null; // 用于存储最后一次调用的this上下文
let lastExecTime = 0; // 记录上次函数真正执行的时间戳
const throttled = function(...args) {
const now = Date.now();
lastArgs = args;
lastThis = this;
// 计算距离上次执行，还需要等待多少时间
const remaining = delay - (now - lastExecTime);
if (remaining <= 0 || remaining > delay) {
// 如果时间已到（或者首次执行，lastExecTime为0）
// 并且没有正在等待的定时器，则立即执行
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastExecTime = now; // 更新上次执行时间
func.apply(lastThis, lastArgs);
} else if (!timeoutId) {
// 如果时间未到，但又没有定时器在等待，则设置一个定时器
// 确保在延迟结束后，执行最后一次触发的函数
timeoutId = setTimeout(() => {
lastExecTime = Date.now(); // 定时器执行时更新时间
timeoutId = null;
func.apply(lastThis, lastArgs);
}, remaining);
}
};
// 增加一个取消节流的方法，有时挺有用的
throttled.cancel = function() {
clearTimeout(timeoutId);
timeoutId = null;
lastExecTime = 0;
lastArgs = null;
lastThis = null;
};
return throttled;
}
// 示例用法：
// const myThrottledFunction = throttle(() => {
// console.log('Function executed!', Date.now());
// }, 1000);
// // 连续调用，但每秒最多执行一次
// document.addEventListener('scroll', myThrottledFunction);
// // 或者
// // setInterval(myThrottledFunction, 100);
这个函数接收两个参数：
func
是你想要节流的函数，
delay
是节流的间隔时间（毫秒）。它返回一个新的函数，当你调用这个新函数时，它会根据内部逻辑来判断是否执行原始函数。
JavaScript节流函数：为什么它在前端开发中如此重要？
说实话，我刚开始接触前端时，对这些“性能优化”的玩意儿是有点不屑的，觉得写好业务逻辑就行了，哪来那么多花里胡哨。但后来，当我自己亲手做了一些需要频繁响应用户操作的页面时，比如那种搜索框实时建议、页面滚动加载更多、或者拖拽功能，我才真正体会到节流（throttle）的重要性。
你想想看，用户在页面上滚动一下鼠标滚轮，一个
scroll
事件可能瞬间触发几十上百次；在输入框里敲字，
input
事件也是连绵不绝。如果每次事件都去执行一个复杂的计算或者发起网络请求，那浏览器肯定会卡顿，用户体验直接直线下降。更糟糕的是，如果你的操作还会触发后端请求，那服务器也会被瞬间涌入的请求压垮。
节流函数就像一个“闸门”，它能有效地限制函数在一定时间内的执行频率。比如说，你设置了一个100毫秒的节流，那么在100毫秒内，无论事件触发多少次，你的函数最多只会执行一次。这大大减少了不必要的计算和网络请求，让你的应用跑起来更顺畅，也对服务器更友好。我的经验告诉我，很多时候，一个简单的节流就能解决掉页面卡顿的大问题，比你绞尽脑汁去优化算法可能效果还立竿见影。它不是什么高深的技术，但绝对是前端工程师工具箱里不可或缺的一把瑞士军刀。
节流（Throttle）与防抖（Debounce）的区别与应用场景
我发现很多初学者，包括我自己当年，在理解节流（throttle）和防抖（debounce）时，总会有点迷糊，觉得它们功能差不多，都是控制函数执行频率的。但实际上，它们的侧重点和适用场景是截然不同的。
简单来说，节流（Throttle）就像是“有规律的执行”，它保证一个函数在固定时间周期内至少执行一次。比如你设定每秒执行一次，那么不管用户操作多频繁，它都会每秒“滴答”一声执行一次。它关注的是“执行频率”，确保函数不会在短时间内被频繁调用。
而防抖（Debounce）则更像是“等我忙完再执行”，它会延迟函数的执行，直到特定事件停止触发一段时间后才执行。如果你设定的延迟是500毫秒，那么只要你在500毫秒内再次触发事件，之前的延迟就会被取消，重新计时。它关注的是“最后一次操作”，通常用于只在用户停止操作后才需要执行的场景。
它们的应用场景也很典型：
-
节流（Throttle）的典型场景：
-
滚动事件（
scroll
）处理：
比如滚动到页面底部加载更多内容，你不想每次滚动都去判断，而是每隔一定时间检查一次。 -
窗口调整大小（
resize
）事件：
调整页面布局或图表大小，不需要用户拖动窗口的每像素变化都触发计算，而是每隔几百毫秒计算一次。 -
拖拽（
mousemove
）事件：
比如实现一个拖拽功能，你可能希望拖拽过程中的位置更新是平滑的，而不是每次鼠标移动都触发大量计算。 - 游戏中的技能冷却： 某个技能释放后，需要等待一段时间才能再次使用，即使你疯狂点击也无效。
-
滚动事件（
-
防抖（Debounce）的典型场景：
-
搜索框输入（
input
）事件：
用户在搜索框输入文字时，你通常希望在用户停止输入一段时间后才去发送搜索请求，而不是每输入一个字符就发一次。 - 自动保存功能： 文本编辑器通常在用户停止输入后自动保存，而不是每敲一个字就保存一次。
- 表单验证： 当用户输入完一个字段后，才触发验证。
-
搜索框输入（
我的经验是，当你需要“持续性”的反馈，但又不想它过于频繁时，用节流；当你需要“最终结果”的反馈，并且希望在用户操作完成后才执行时，用防抖。理解它们各自的特点，能让你在实际开发中做出更准确的技术选型。
深入剖析：如何编写一个生产级的JavaScript节流函数？
上面给出的节流函数已经相对完整了，但在实际生产环境中，我们往往还需要考虑一些更细致的问题，让它变得更加健壮和灵活。我自己在写类似工具函数时，就常常会纠结这些细节，因为它们直接影响到函数在不同场景下的表现。
-
this
上下文和参数的传递：
这是最基本也是最容易被忽略的。在我们的实现中，func.apply(lastThis, lastArgs)
确保了原始函数的
this
指向和参数都能正确传递。如果忘了处理
this
，那么在类方法或特定上下文中使用时就会出问题。
-
leading
和
trailing
选项的控制：
在一些高级的节流实现中，会提供leading
（前沿）和
trailing
（后沿）两个选项。
-
leading: true
(默认)：意味着在节流周期开始时会立即执行一次函数。这对于需要即时响应的场景很有用，比如第一次滚动就立即加载。
-
trailing: true
(默认)：意味着在节流周期结束后，如果期间有新的触发，会再执行一次函数。这保证了在用户停止操作后，最后一次触发也能得到响应。
- 有些时候，你可能只想要
leading
（比如只在第一次滚动时加载，后续滚动不关心），或者只想要
trailing
（比如只在滚动停止时才计算最终位置）。我的实现是同时兼顾了这两种情况，但在某些库（如 Lodash）中，你可以通过配置来选择。
-
-
取消（
cancel
）方法的提供：
在某些动态场景下，你可能需要提前停止一个正在节流的函数。比如，用户离开了当前页面，或者某个组件被卸载了，你就不希望它的节流函数还在后台默默运行。提供一个cancel
方法（如我们示例中的
throttled.cancel()
），可以让你手动清除定时器和重置状态，避免内存泄漏或不必要的计算。这在SPA（单页应用）中处理组件生命周期时尤其重要。
-
返回值：
节流函数通常不直接返回原始函数的执行结果，因为原始函数的执行是异步的或者被延迟的。如果你需要获取原始函数的返回值，可能需要通过回调函数或者 Promise 来处理，但这会让节流函数本身变得复杂。多数情况下，我们对节流函数的返回值并不关心，更关注它的“副作用”（如更新UI、发送请求）。 -
健壮性：
Date.now()
的使用：
我们使用Date.now()
来获取时间戳，这在绝大多数情况下都是可靠的。但也要注意，如果系统时间被修改，可能会导致一些意想不到的行为，但这通常超出了前端节流函数需要处理的范畴。
编写一个生产级的节流函数，除了实现核心逻辑，更重要的是要考虑它在各种复杂场景下的行为，并提供足够的灵活性和控制能力。这不仅仅是写代码，更是对潜在问题的预判和规避。
暂无评论内容