在日常的前端开发工作中，你是否曾经遇到过这样的尴尬场景：当你试图在 INLINECODE1594120a（滚动）或 INLINECODE4529dc8d（调整窗口大小）这样的事件中执行一些稍微复杂的逻辑时，页面突然变得卡顿不堪？这是因为这些事件会在极短的时间内被高频触发，导致浏览器不堪重负。
别担心，这正是我们今天要探讨的核心问题——函数节流。在这篇文章中，我们将深入探讨什么是节流、它是如何工作的、如何用不同的方式实现它，以及在真实项目中如何通过它来极大地提升用户体验和页面性能。准备好和我们一起优化你的代码了吗？让我们开始吧。
目录
什么是节流？
简单来说，节流是一种用于限制函数在特定时间范围内执行次数的技术。你可以把它想象成高速公路上的收费站：无论有多少辆车（事件触发）想要通过，收费站（节流函数）都会确保每隔一段时间（固定时间间隔）才放行一辆，从而保证道路（主线程）的畅通。
在处理计算密集型操作（例如调整窗口大小或滚动事件）时，它极其有用，因为在这些场景下，无限制地频繁触发函数调用往往会导致严重的性能问题，比如页面卡顿、UI 无响应甚至浏览器崩溃。
为什么我们需要节流？
在我们深入代码之前，让我们先看看浏览器到底发生了什么。
某些用户交互，例如滚动页面或调整浏览器窗口大小，每秒可能会触发事件数十次甚至上百次。如果我们直接在这些事件的处理函数中执行复杂的 DOM 操作、发起网络请求或进行重计算，后果往往是灾难性的：
- CPU 和内存使用率飙升：大量的函数调用会占用大量的 CPU 时间片和内存资源。
- 用户界面无响应：因为主线程忙于处理这些事件，浏览器无法及时响应用户的点击或输入。
- 低效的资源浪费：如果你在滚动事件中发起 API 请求，未经节流的话，可能会在几毫秒内向服务器发送数百个请求，这不仅是浪费，还可能导致被封禁。
通过对函数进行节流，我们可以强制规定它以受控的速率执行（例如每 200ms 执行一次），从而显著减少资源消耗并保持界面的流畅度。
节流的核心原理
节流的工作原理并不复杂。它的核心逻辑是：无论事件触发得有多快，函数的实际执行都会被“锁定”，直到预定的时间间隔过去。
具体的工作流程如下：
- 事件持续触发（例如用户正在快速滚动鼠标滚轮）。
- 节流函数检查当前是否距离上一次执行已经超过了设定的时间间隔。
- 如果时间未到：忽略此次触发，函数不执行。
- 如果时间已到：立即执行目标函数，并重置计时器，开始下一个周期的等待。
这意味着，在单位时间内，无论原始事件触发了 100 次还是 1000 次，我们的核心逻辑可能只会执行 5 次或 10 次。
实现方式一：基于时间戳的节流
这是最经典、最直观的实现方式。我们利用 Date.now() 来记录上一次函数执行的时间戳，并在每次事件触发时进行比对。
代码示例
/**
* 基于时间戳的节流函数
* @param {Function} fn - 需要被节流的函数
* @param {number} delay - 节流的时间间隔（毫秒）
*/
function throttle(fn, delay) {
// 闭包变量，用于记录上一次执行的时间戳
let lastTime = 0;
return function (...args) {
// 获取当前时间戳
let now = Date.now();
// 如果当前时间距离上一次执行的时间超过了设定的延迟
if (now - lastTime >= delay) {
// 执行原函数，并绑定上下文 this 和参数 args
fn.apply(this, args);
// 更新最后执行时间
lastTime = now;
}
};
}
// 实际使用场景：监听窗口调整大小事件
window.addEventListener(‘resize‘, throttle(() => {
console.log(‘正在计算新的窗口布局...‘);
// 这里通常包含耗时的计算逻辑
}, 1000));
它是如何工作的？
在这个示例中，节流函数接收一个函数 INLINECODE961e0f7a 和一个延迟时间 INLINECODE59d4fd90 作为参数。它使用闭包中的 lastTime 变量来跟踪上一次执行的时间。
- 当页面调整大小时，
resize事件会疯狂触发。 - 每次触发，
throttle返回的匿名函数都会运行。 - 它计算 INLINECODE7f5988ed。只有当这个差值大于或等于我们传入的 INLINECODE5ff7d622（例如 1000ms）时，真正的逻辑（
console.log）才会执行。 - 优点：这个实现非常简洁，且在第一次触发时通常会立即执行。
实现方式二：使用定时器
除了时间戳，我们还可以使用 setTimeout 来实现节流。这种方式的行为略有不同，它更像是一个“冷却”机制。
代码示例
/**
* 基于定时器的节流函数
* @param {Function} fn - 需要被节流的函数
* @param {number} delay - 节流的时间间隔（毫秒）
*/
function throttle(fn, delay) {
// 标记位，记录当前是否处于“冷却”状态
let isThrottled = false;
return function (...args) {
// 如果正在冷却中，直接返回
if (isThrottled) return;
// 执行原函数
fn.apply(this, args);
// 开启冷却状态
isThrottled = true;
// 设定定时器，在延迟时间结束后解除冷却状态
setTimeout(() => {
isThrottled = false;
}, delay);
};
}
// 实际使用场景：处理滚动事件
window.addEventListener(‘scroll‘, throttle(() => {
console.log(‘页面正在滚动，更新位置信息...‘);
// 例如：计算懒加载图片是否进入视口
}, 500));
它是如何工作的？
在这个示例中，我们使用 isThrottled 变量作为一个锁。
- 当函数第一次触发时，锁是开着的（INLINECODE61cf0048），所以我们执行目标函数，并立刻把锁锁上（INLINECODE7bd3cd90）。
- 随后的事件触发因为检测到锁是关着的，都会被忽略。
- 只有当 INLINECODE27fb1ca1 在指定的 INLINECODE969830b6 之后运行了回调函数，锁才会被重新打开。
- 注意：这种方式的一个特点是，目标函数会在事件触发时立即执行，但停止触发后，由于定时器已经开启，函数不会再次立即执行（除非有新的触发）。
实现方式三：混合模式（最佳实践）
作为专业的开发者，你可能已经注意到了上述两种方法的细微差别。
- 时间戳版：如果最后一次触发距离上次执行不足间隔时间，它就不会再执行了。这可能导致如果你停止滚动，最后一次更新不会发生。
- 定时器版：它总是会保证在间隔结束后执行一次，但第一次触发是立即执行的。
为了结合两者的优点，我们可以创建一个混合版本：它能处理最后一次触发，确保我们不丢失最终的交互反馈。
代码示例
/**
* 混合版节流函数：结合时间戳和定时器
* 这种实现能确保函数以固定频率执行，
* 并且如果事件停止触发，会在最后一次触发后执行一次
*/
function throttle(fn, delay) {
let lastTime = 0;
let timer = null;
return function (...args) {
const now = Date.now();
// 计算剩余时间
const remaining = delay - (now - lastTime);
// 清除之前的定时器（如果存在），防止重复执行
if (timer) clearTimeout(timer);
// 如果时间到了，或者是第一次执行（remaining === delay
if (remaining delay) {
if (timer) {
clearTimeout(timer);
timer = null;
}
lastTime = now;
fn.apply(this, args);
} else if (!timer) {
// 如果时间没到，且没有定时器在运行
// 设置一个定时器，在剩余时间结束后执行
timer = setTimeout(() => {
lastTime = Date.now();
timer = null;
fn.apply(this, args);
}, remaining);
}
};
}
// 使用场景：搜索建议功能
window.addEventListener(‘input‘, throttle((e) => {
console.log(`正在搜索: ${e.target.value}`);
// 模拟 API 调用
}, 1000));
这个版本稍微复杂一些，但它提供了更平滑的体验：它在事件开始时执行，在持续过程中按频率执行，并在事件停止后还能“补上”最后一次执行。
节流与防抖：我们该如何选择？
很多人容易混淆节流和防抖。虽然它们都是用来控制函数执行频率的，但应用场景大相径庭。
- 防抖：“如果你不停止触发，我就不执行。” 它的核心思想是将多次连续的触发合并为一次执行。只有在事件停止触发一段时间后，函数才会执行。
典型场景*：搜索框输入联想（等用户打完字再搜索）、窗口 Resize 结束后的布局计算。
- 节流：“无论你怎么触发，我都会按固定节奏执行。” 它的核心思想是保证函数在指定时间段内至少执行一次。
典型场景*：滚动加载更多（滚动过程中持续检查）、鼠标移动轨迹绘制、防止按钮被疯狂点击。
节流
:—
每隔固定时间执行一次
高频但有规律
拖拽、滚动、动画、连续点击
节流的实际应用场景
为了让你更好地理解何时使用节流，这里有几个我们在实际开发中经常遇到的案例：
1. 处理无限滚动
当用户向下滚动页面以加载更多内容时，scroll 事件会像疯了一样触发。如果不加节流，你会瞬间向服务器发送几十个请求，不仅可能导致数据重复，还可能直接把后端搞挂。
window.addEventListener(‘scroll‘, throttle(() => {
const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
// 当滚动到底部附近时加载更多
if (scrollTop + clientHeight >= scrollHeight - 50) {
console.log("加载更多数据...");
// fetchData();
}
}, 200)); // 每200ms最多检查一次
2. 游戏中的动画与交互
在开发网页游戏时，我们通常需要更新游戏状态（比如移动敌人位置）。为了不卡顿主渲染线程，我们需要将更新频率限制在一个合理的范围内（例如每秒 60 帧，即约 16.6ms 一帧）。requestAnimationFrame 其实是浏览器自带的一种高级节流，但在某些逻辑计算上，自定义节流依然有用。
const canvas = document.querySelector(‘canvas‘);
const ctx = canvas.getContext(‘2d‘);
// 更新游戏状态，比如计算物理碰撞
function updateGame() {
console.log("更新游戏物理逻辑...");
}
// 使用节流来限制物理引擎的更新频率，而不是渲染频率
const throttledUpdate = throttle(updateGame, 1000 / 60); // 锁定60fps
// 渲染循环可以跑满刷新率，但逻辑更新被节流了
// 这样可以节省计算资源
3. 防止恶意高频点击
对于一些重要的操作按钮（如“提交订单”或“付款”），用户可能会因为心急而连续点击多次。如果我们不加以限制，可能会生成多笔订单。
const checkoutBtn = document.getElementById(‘checkout-btn‘);
function handlePayment() {
console.log("正在处理付款...");
// 付款逻辑...
}
// 对点击事件进行节流，1秒内只能点击一次
checkoutBtn.addEventListener(‘click‘, throttle(handlePayment, 1000));
常见错误与最佳实践
在我们编写节流函数时，有几个坑是我们需要特别注意的：
1. 丢失 this 上下文
在节流函数的内部实现中，如果你直接调用 INLINECODE2a880be5，可能会导致 INLINECODE15976ee0 指向错误（通常指向 INLINECODE8d27b1d2 或 INLINECODE79c58c78），从而在函数内部无法访问组件或 DOM 元素的属性。
解决方法：始终使用 INLINECODEbd7f66c5 或 INLINECODE7e4798ed 来确保原函数的 this 上下文被正确保留。
2. 忽略参数传递
事件处理函数通常接收事件对象（INLINECODE8bfaab7f）作为参数。如果你的节流函数没有正确转发参数，INLINECODEa211f70e 可能会变成 undefined，导致调试困难。
解决方法：使用 ES6 的剩余参数 INLINECODE216f773d 来收集所有传入的参数，并在调用原函数时传递出去：INLINECODE1f843af1。
3. 节流时间的选择
并不是越短越好，也不是越长越好。
- 太短（< 50ms）：可能无法有效减少开销，浏览器还是会卡。
- 太长（> 500ms）：用户会感觉到明显的“延迟”。例如在拖拽元素时，元素会跟不上鼠标的速度，产生“漂移感”。
建议：对于 UI 交互，一般设置在 100ms 到 200ms 之间是一个比较平衡的数值。
性能优化建议
虽然节流本身就是为了性能优化，但我们在实现它时也可以更极致。
- 使用 Lodash 或 Underscore：除非你有特殊需求，否则不要自己造轮子。成熟的库已经处理了边缘情况（比如取消节流、配置 INLINECODE2f9d473f 和 INLINECODE3e4faf6a 选项），并且经过充分测试。
// 使用 Lodash 的示例
import _ from ‘lodash‘;
const efficientScroll = _.throttle(() => {
console.log(‘Scroll handled efficiently‘);
}, 200);
window.addEventListener(‘scroll‘, efficientScroll);
总结
在这篇文章中，我们深入探讨了 JavaScript 中节流的概念。我们了解到，通过限制函数在高频事件中的执行频率，我们可以显著提升应用的性能和稳定性。
我们回顾了节流的三个主要实现方式：
- 基于时间戳：简洁高效，立即执行。
- 基于定时器：更有节奏感，适合控制节奏。
- 混合模式：结合两者优点，提供最佳的用户体验。
我们也对比了它与防抖的区别，并分析了在无限滚动、游戏开发和防止重复点击等实际场景中的应用。
掌握节流技术是每一位前端开发者进阶的必经之路。希望你在未来的项目中，每当遇到高频事件时，都能下意识地想到：“这里我需要加一个节流吗？” 如果答案是肯定的，那就动手实现它吧！