告别卡顿！JavaScript 性能优化利器：深度解析截流（Throttling）85

哈喽，各位前端开发者们！我是你们的知识博主。有没有过这样的经历：在滚动页面、调整窗口大小或者拖拽元素时，页面卡顿得像“幻灯片”，或者浏览器警告你“脚本运行时间过长”？别急，今天我们就来聊聊一个能让你的应用“丝滑”起来的秘密武器——JavaScript 中的“截流”（Throttling）！

在性能优化领域，截流（Throttling）和防抖（Debouncing）就像一对“双生子”，都是处理高频事件的利器。它们的目标都是限制函数执行的频率，但侧重点不同。今天，我们重点剖析“截流”，让你彻底掌握它，让你的应用性能更上一层楼！

一、什么是截流（Throttling）？

想象一下玩游戏，你的技能有“冷却时间”（CD）。在技能冷却时间内，你无法再次释放该技能，必须等待CD结束后才能使用。

截流（Throttling）的原理就与此类似：它会限制一个函数在一定时间内只能执行一次。无论这个函数被触发了多少次，它都会确保在设定的时间间隔内，这个函数只会被真正执行一次。就像给函数加了一个“最短执行间隔”的限制。

核心思想：在设定的时间周期内，函数只能执行一次。如果在这个周期内函数被多次触发，那么只有周期内第一次触发会被执行（或者根据实现，可能是周期末尾最后一次触发）。

二、为什么要使用截流？经典应用场景！

理解了截流的概念，我们来看看它在实际开发中能解决哪些痛点：

页面滚动（scroll）事件：当用户滚动页面时，scroll 事件会非常频繁地触发。如果我们在 scroll 事件中执行复杂的DOM操作或网络请求，会导致页面卡顿甚至崩溃。使用截流可以限制这些操作的频率，例如每隔100毫秒才计算一次滚动位置，或加载下一页内容。

窗口大小调整（resize）事件：调整浏览器窗口大小时，resize 事件也会被高频触发。如果你需要在 resize 事件中重新布局页面，不加限制同样会造成性能问题。截流能确保布局调整操作不会过于频繁。

鼠标移动（mousemove）事件：在需要根据鼠标位置进行实时反馈（如绘制路径、显示坐标）的场景中，mousemove 事件可能每秒触发几十甚至上百次。截流可以平滑这些反馈，减少不必要的计算。

拖拽（drag）事件：在拖拽操作中，实时更新元素位置。截流可以确保元素位置更新得当，而不是过于频繁导致卡顿。

高频点击事件（如点赞、提交表单）：虽然防抖更常用于这类场景，但截流也可以防止用户在极短时间内多次点击导致重复提交或重复操作。

这些场景的共同特点是：事件触发频率非常高，但我们并不需要每次触发都执行相应的逻辑，只需要在一定的“采样”频率下执行即可。

三、如何实现一个截流函数？手把手教学！

我们来手写一个通用的截流函数。其核心逻辑是：利用一个时间戳来记录上一次函数执行的时间，并根据设定的间隔（delay）来判断是否允许本次执行。

基础版截流实现

这个版本会立即执行一次，并且在冷却期间再次触发的事件会被忽略，直到冷却时间结束，才能再次执行。
function throttle(func, delay) {
let lastExecutionTime = 0; // 上次执行时间，初始为0表示可以立即执行
return function(...args) {
const now = (); // 当前时间
// 如果当前时间距离上次执行时间已经超过了设定的延迟
if (now - lastExecutionTime > delay) {
lastExecutionTime = now; // 更新上次执行时间
(this, args); // 执行原函数
}
// 否则，不执行任何操作，忽略本次触发
};
}

使用示例：
// 假设有一个处理滚动事件的函数
function handleScroll() {
('页面滚动了！', ());
}
// 创建一个截流后的滚动事件处理函数，每200毫秒最多执行一次
const throttledScroll = throttle(handleScroll, 200);
// 监听滚动事件
('scroll', throttledScroll);
// 当不再需要监听时，记得移除事件监听器
// ('scroll', throttledScroll);

解释：
每次事件触发时，它都会检查当前时间距离上一次函数执行的时间是否超过了 `delay`。如果超过了，就执行函数并更新 `lastExecutionTime`；否则，就直接跳过本次执行。这个版本的问题是，如果事件在高频触发过程中突然停止，那么在冷却时间内的最后一次触发可能永远不会执行。

进阶版截流实现（支持 leading 和 trailing 调用）

为了更全面地处理各种场景，一个更健壮的截流函数通常会考虑两种执行时机：

`leading`（前缘）：第一次触发时立即执行。

`trailing`（后缘）：在冷却时间结束后，如果期间有新的触发，那么在冷却时间结束后再执行一次。

下面是一个更完善的实现，它默认会处理 leading 和 trailing 两种情况：
function throttle(func, delay) {
let timeoutId = null; // 用于存储 setTimeout 的 ID
let lastExecutionTime = 0; // 上次实际执行的时间
let lastArgs = null; // 存储最后一次触发的参数
let lastThis = null; // 存储最后一次触发的 this 上下文
const throttled = function(...args) {
const now = ();
lastArgs = args;
lastThis = this;
// 计算距离下次执行还需要等待的时间
// 如果 lastExecutionTime 为 0 (首次触发) 或已经过了 delay，remaining 会小于等于 0
const remaining = delay - (now - lastExecutionTime);
// 如果距离上次执行已经超过了 delay (或首次触发)
if (remaining delay) { // remaining > delay 确保首次执行
// 清除可能存在的尾部延迟执行
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastExecutionTime = now; // 更新上次执行时间
(lastThis, lastArgs); // 立即执行
} else if (!timeoutId) {
// 如果在 delay 时间内再次触发，并且没有设置尾部延迟执行
// 则设置一个定时器，在 remaining 时间后执行
timeoutId = setTimeout(() => {
lastExecutionTime = (); // 延迟执行时更新上次执行时间
timeoutId = null; // 清除定时器ID
(lastThis, lastArgs); // 执行函数
}, remaining);
}
};
// 添加一个取消功能，方便在组件卸载等场景下清理定时器
= function() {
clearTimeout(timeoutId);
timeoutId = null;
lastExecutionTime = 0;
};
return throttled;
}

这个进阶版的解释：
每次事件触发时：

首先计算距离上次执行已经过了多久，以及距离下次可以执行还有多久（remaining）。
如果 `remaining delay` (用于处理第一次调用或时钟跳变的情况)，说明已经可以执行了，立即执行函数，并更新 `lastExecutionTime`，清除任何待定的尾部执行定时器。
如果 `remaining > 0` 且 `timeoutId` 不存在，说明函数在冷却期内被触发，并且还没有安排“尾部”执行。此时，就设置一个 `setTimeout`，在 `remaining` 时间后执行一次（这处理了高频事件停止后，最后一次触发的执行）。

这个版本确保了：

函数首次触发时会立即执行（leading）。
在冷却期内，如果持续有触发，只会等待直到冷却期结束。
如果冷却期内最后一次触发后没有新的触发，它会在冷却期结束后再执行一次（trailing）。

四、截流（Throttling）与防抖（Debouncing）的区别和选择

既然提到了截流，就不得不提它的“兄弟”——防抖（Debouncing）。它们都用于限制函数执行频率，但适用场景和实现逻辑有所不同：

防抖（Debouncing）：强调“不再触发后执行”。当事件持续触发时，它会不断地重置定时器。只有当事件停止触发，并且在设定的延迟时间之后，函数才会被执行一次。

形象比喻：电梯关门。如果有人进来，电梯会重新计算关门时间。只有当一段时间内没有新人进入，电梯才会真正关门。
适用场景：搜索框输入（用户停止输入后才发起请求）、窗口停止调整大小后才重新布局。

截流（Throttling）：强调“在一定时间内执行一次”。它会确保函数在设定的时间间隔内最多只执行一次，无论事件在这期间被触发了多少次。

形象比喻：游戏技能冷却。技能释放后进入冷却，即使你狂按技能键，也必须等到冷却结束才能再次释放。
适用场景：页面滚动加载、鼠标移动绘制、按钮重复点击（防止连续过快点击）。

总结选择：

如果你的需求是“事件停止后才执行一次”，选择防抖。
如果你的需求是“持续触发过程中，每隔一段时间执行一次”，选择截流。

五、最佳实践与注意事项

掌握了截流的原理和实现，再来看看一些实用的建议：

选择合适的 `delay` 值： `delay` 的值过小，优化效果不明显；过大，可能导致用户体验下降（如滚动不流畅）。通常根据具体场景，几十到几百毫秒都是常见的选择。

处理 `this` 和 `arguments`：确保截流后的函数在执行时能正确获取原始函数的 `this` 上下文和 `arguments` 参数。我们的实现中使用了 `apply(this, args)` 完美解决了这个问题。

取消（Cancel）功能：如果你在组件中使用了截流函数，当组件卸载时，应该调用 `cancel` 方法来清除任何待定的定时器，防止内存泄漏。

考虑 `requestAnimationFrame`：对于某些动画或高频的DOM更新，`requestAnimationFrame` 可能是比 `setTimeout`/`setInterval` 更好的截流方式。它会把回调函数安排在浏览器下一次重绘之前执行，能确保动画流畅，避免丢帧。

利用现有库：像 Lodash 和 Underscore 这样的实用工具库都提供了成熟的 `` 和 `` 方法，它们通常经过了大量测试和优化，功能更完善，例如支持 `options` 配置 `leading` 和 `trailing`。在项目中可以直接使用，省去自己手写和维护的麻烦。