引言：编程的优雅与效率
在现代软件开发中，尤其是在前端领域，用户体验和应用性能是衡量一个产品好坏的关键指标。我们经常会遇到这样的场景：用户在搜索框中快速输入文字，浏览器窗口被频繁地调整大小，或是页面被快速滚动。这些高频的用户交互事件如果不加以妥善处理，往往会导致大量的计算、DOM操作甚至网络请求，进而造成界面卡顿、性能下降，严重影响用户体验。
作为一名编程专家，我的目标是不仅要解决问题，更要以优雅、高效、可维护的方式去解决。今天，我们将深入探讨一个强大的编程范式——高阶函数（Higher-Order Function），并以此为基石，手写实现两个在前端性能优化中至关重要的工具：防抖（Debounce）与节流（Throttle）。这不仅仅是关于解决特定问题，更是关于提升我们对函数抽象能力、理解编程范式以及编写更健壮代码的深刻洞察。
高阶函数：编程的基石与抽象的力量
在深入防抖和节流之前，我们必须先理解它们所依赖的核心概念——高阶函数。高阶函数是函数式编程的核心特征之一，它将函数视为“一等公民”（First-Class Citizen），赋予了函数像普通数据类型（如数字、字符串、对象）一样的地位。
什么是高阶函数？
一个函数满足以下任意一个条件，即可被称为高阶函数：
- 接受一个或多个函数作为参数。 这意味着我们可以将函数的行为作为参数传递给另一个函数，从而实现更灵活的控制和更强的抽象能力。
- 返回一个函数作为结果。 这使得函数可以作为工厂，根据不同的输入条件动态地生成新的函数。
在 JavaScript 中，由于其动态性和函数式编程的特性，高阶函数无处不在。我们日常使用的 Array.prototype.map, Array.prototype.filter, Array.prototype.reduce 等方法，都是高阶函数的典型代表。它们都接受一个回调函数作为参数，并根据该回调函数的逻辑处理数组元素。
为什么使用高阶函数？
高阶函数不仅仅是一种语法特性，它代表了一种更高级的抽象思维，带来了诸多优势：
- 代码复用与抽象： 高阶函数可以将通用的逻辑封装起来，而将变化的逻辑作为参数传入。这极大地提高了代码的复用性，减少了重复代码，并使得代码更易于理解和维护。例如，一个排序函数可以接受一个比较函数作为参数，从而实现对不同类型数据或不同排序规则的通用排序。
- 解耦与灵活性： 通过将行为抽象化为函数参数，高阶函数能够将核心逻辑与具体实现细节解耦。这增强了代码的灵活性，使得我们可以在不修改核心逻辑的前提下，轻松地改变其行为。
- 函数式编程范式： 高阶函数是函数式编程的基石。它鼓励我们编写无副作用（Side-effect free）、纯粹（Pure）的函数，将复杂问题分解为一系列简单函数的组合。这种编程风格通常能产出更易于测试、推理和并行化的代码。
- 闭包的强大应用： 高阶函数经常与闭包（Closure）结合使用。当一个内部函数引用了其外部函数的变量时，即使外部函数已经执行完毕，这些变量仍然会被保留在内存中，供内部函数访问。这使得高阶函数能够“记住”状态，从而实现像防抖和节流这样的高级功能。
简单示例：一个高阶函数
让我们看一个简单的自定义高阶函数示例，以巩固对高阶函数的理解：
/**
* @description 一个简单的高阶函数，用于创建带有前缀日志的函数
* @param {string} prefix - 日志前缀
* @returns {Function} 返回一个新函数，该新函数接受一个消息并打印带有前缀的日志
*/
function createLogger(prefix) {
// createLogger 是一个高阶函数，因为它返回一个函数
return function(message) {
// 这个返回的匿名函数形成了一个闭包，它“记住”了外部函数的 prefix 变量
console.log(`[${prefix}] ${message}`);
};
}
// 使用高阶函数创建两个不同的日志器
const errorLogger = createLogger('ERROR');
const debugLogger = createLogger('DEBUG');
// 调用由高阶函数创建的新函数
errorLogger('发生了一个严重错误！'); // 输出: [ERROR] 发生了一个严重错误！
debugLogger('正在进行调试...'); // 输出: [DEBUG] 正在进行调试...
// 另一个例子：高阶函数接受函数作为参数
/**
* @description 一个高阶函数，用于测量另一个函数的执行时间
* @param {Function} func - 需要测量执行时间的函数
* @returns {Function} 返回一个新函数，该新函数在调用原始函数前后记录时间
*/
function measureExecutionTime(func) {
// measureExecutionTime 是一个高阶函数，因为它接受一个函数作为参数并返回一个函数
return function(...args) {
const start = Date.now();
const result = func(...args); // 调用原始函数
const end = Date.now();
console.log(`函数 ${func.name || 'anonymous'} 执行耗时：${end - start}ms`);
return result; // 返回原始函数的执行结果
};
}
// 定义一个需要测量时间的函数
function calculateSum(a, b) {
// 模拟耗时操作
for (let i = 0; i < 1000000; i++) {
Math.sqrt(i);
}
return a + b;
}
// 使用高阶函数包装 calculateSum
const timedCalculateSum = measureExecutionTime(calculateSum);
// 调用包装后的函数
const sum = timedCalculateSum(10, 20); // 会打印执行时间，并返回 30
console.log('Sum:', sum);通过这些例子，我们看到高阶函数如何帮助我们构建更具表达力、更灵活且更易于管理的代码。现在，我们已准备好将这一强大工具应用于更复杂的性能优化场景——防抖和节流。
防抖（Debounce）：避免重复执行的艺术
问题背景
想象一个场景：用户在一个搜索输入框中键入文字以获取实时搜索建议。如果没有防抖处理，每输入一个字符，就会立即触发一次搜索请求。如果用户输入速度很快，比如在短短几秒内输入了十几个字符，那么服务器就会收到十几个不必要的请求。这不仅浪费了服务器资源，也可能导致前端渲染的卡顿，因为浏览器需要处理大量的数据更新。
类似的场景还有：
- 窗口调整（
window.resize）事件： 用户拖动浏览器窗口调整大小时，resize事件会持续高频触发。 - 拖拽（
mousemove）事件： 元素被拖拽时，mousemove事件会持续触发。 - 表单验证： 用户在输入时实时验证，如果每次按键都触发验证，体验会很差。
这些问题都指向一个共同的需求：我们不希望在用户持续操作的过程中频繁触发某个函数，而是在用户“停止操作”一段时间后，才执行一次。这就是防抖的用武之地。
核心思想
防抖的核心思想是：在事件被触发后，延迟一定时间执行回调函数。如果在延迟时间内该事件再次被触发，则清除上一次的定时器，并重新设置新的定时器。只有当事件停止触发，并且超过了设定的延迟时间后，回调函数才会被真正执行一次。
简单来说，就是“你尽管触发，我只在你不动了之后才执行”。
基本实现
让我们从一个最简单的防抖实现开始。
/**
* @description 基本的防抖函数实现
* @param {Function} func - 需要防抖的函数
* @param {number} delay - 延迟执行的时间（毫秒）
* @returns {Function} 返回一个防抖后的新函数
*/
function debounce(func, delay) {
let timeoutId = null; // 用于存储定时器ID，通过闭包在多次调用中保持其状态
return function(...args) {
// 保存函数的执行上下文（this）
const context = this;
// 每次函数被调用时，先清除上次的定时器
if (timeoutId) {
clearTimeout(timeoutId);
}
// 重新设置一个新的定时器
timeoutId = setTimeout(() => {
// 当延迟时间到达时，执行原始函数
func.apply(context, args);
timeoutId = null; // 执行后清空定时器ID，为下一次防抖做准备
}, delay);
};
}
// 示例应用
function search(query) {
console.log(`正在搜索：${query}`);
}
const debouncedSearch = debounce(search, 500); // 延迟 500 毫秒
// 模拟用户快速输入
debouncedSearch('a');
debouncedSearch('ap');
debouncedSearch('app'); // 在此处的 500ms 内，前面两个调用会被取消
// 500ms 后，如果不再有输入，app 会被搜索
setTimeout(() => {
debouncedSearch('apple'); // 又一次输入，前面的 app 搜索会被取消
}, 700);
setTimeout(() => {
console.log("等待输入停止...");
}, 1500);
// 预期输出：
// 等待输入停止...
// 正在搜索：apple (约在 700 + 500 = 1200ms 后执行)这个基本实现已经能解决大部分问题，但它还有一些局限性，例如：
this上下文和参数丢失： 原始函数func在setTimeout回调中执行时，其this上下文会指向window（严格模式下为undefined），而不是原始调用时的上下文。同时，原始函数的参数也无法传递。- 无法立即执行： 有时我们希望函数在第一次触发时就立即执行，而不是等待。
- 无法取消： 防抖函数一旦设置，就没有一个明确的机制可以强制取消当前的等待，使其不再执行。
- 无返回值： 原始函数可能有返回值，但当前的防抖函数无法捕获并返回。
改进与增强
为了解决上述问题，我们需要对防抖函数进行更全面的设计。
1. 处理 this 上下文与参数
在 debounce 返回的内部函数中，我们使用 this 捕获当前的执行上下文，并使用 arguments 捕获所有传递给防抖函数的参数。然后，通过 func.apply(context, args) 将它们正确地传递给原始函数。
2. 立即执行（Leading Edge / Immediate Execution）
有时，我们希望防抖函数在第一次触发时就立即执行一次，然后才开始等待冷却时间。例如，一个按钮点击，我们希望第一次点击立即响应，但后续快速的点击在冷却时间内被忽略。这可以通过一个 immediate 或 leading 参数来控制。
- 当
immediate为true时，如果timeoutId不存在（即是第一次触发），则立即执行。 - 随后，设置定时器，在冷却期内再次触发时，会清除定时器并重新设置。
- 在定时器回调中，如果
immediate为true，则不再执行func，因为第一次已经执行过了。 - 需要一个
result变量来保存立即执行时的返回值，以便最终返回。
3. 取消功能（Cancel Functionality）
提供一个 cancel 方法，可以随时清除当前的定时器，使得等待中的函数不再执行。这对于某些需要中断操作的场景非常有用。
4. 返回值
为了保持与原始函数的一致性，防抖函数应该能够返回原始函数的执行结果。如果原始函数是立即执行的，则返回立即执行的结果；否则，返回 undefined（因为异步执行的结果无法同步返回）。
完整版 Debounce 代码
/**
* @description 增强版防抖函数实现，支持 `this` 和参数传递，立即执行，以及取消功能
* @param {Function} func - 需要防抖的函数
* @param {number} delay - 延迟执行的时间（毫秒）
* @param {boolean} [immediate=false] - 是否在第一次触发时立即执行函数
* @returns {Function & {cancel: Function}} 返回一个防抖后的新函数，并带有 `cancel` 方法
*/
function debounce(func, delay, immediate = false) {
let timeoutId = null; // 定时器ID
let result = null; // 用于存储函数执行结果
/**
* @description 防抖后的函数
* @param {...any} args - 传递给原始函数的参数
* @returns {any} 原始函数的执行结果（如果 immediate 为 true 且立即执行，否则为 undefined）
*/
const debounced = function(...args) {
// 保存函数的执行上下文和参数，以便在定时器回调中使用
const context = this;
// 判断是否是第一次触发且需要立即执行
// 如果 timeoutId 为 null，说明当前没有等待中的执行，即是第一次触发（或上次执行已完成）
const callNow = immediate && !timeoutId;
// 每次调用都清除上一个定时器，确保只有在 delay 时间内不再触发时才执行
clearTimeout(timeoutId);
// 设置新的定时器
timeoutId = setTimeout(() => {
timeoutId = null; // 定时器结束后，将 timeoutId 置为 null，表示当前没有等待中的执行
// 如果不是立即执行模式，或者虽然是立即执行模式但第一次已经执行过了，则在此处执行
if (!immediate) {
result = func.apply(context, args);
}
}, delay);
// 如果是立即执行模式，且是第一次触发，则立即执行
if (callNow) {
result = func.apply(context, args);
}
return result;
};
/**
* @description 取消当前正在等待的防抖函数执行
*/
debounced.cancel = function() {
clearTimeout(timeoutId);
timeoutId = null;
result = null; // 清除结果
};
return debounced;
}
// --- 示例应用 ---
// 1. 基本用法 (默认非立即执行)
console.log("--- 示例1: 基本防抖 (非立即执行) ---");
function logInput(value) {
console.log(`搜索框输入: ${value}`);
}
const debouncedLogInput = debounce(logInput, 500);
debouncedLogInput('h');
debouncedLogInput('he');
debouncedLogInput('hel'); // 500ms 内，前面两个会被取消
setTimeout(() => debouncedLogInput('hello'), 600); // 再次触发，上一个 hel 会被取消
setTimeout(() => console.log('等待防抖结束...'), 1200);
// 预期：约 600 + 500 = 1100ms 后打印 "搜索框输入: hello"
// 2. 立即执行模式
console.log("n--- 示例2: 立即执行防抖 ---");
let count = 0;
function clickHandler() {
count++;
console.log(`按钮点击了 ${count} 次 (立即执行)`);
return count;
}
const debouncedClickHandler = debounce(clickHandler, 1000, true);
// 第一次点击会立即执行
const res1 = debouncedClickHandler(); // 立即执行，count = 1
console.log("第一次点击结果:", res1);
// 1秒内再次点击，会被防抖
const res2 = debouncedClickHandler(); // 不会立即执行，返回第一次的结果
console.log("第二次点击结果:", res2); // 应该还是 1
setTimeout(() => {
const res3 = debouncedClickHandler(); // 1秒后再次点击，会立即执行
console.log("第三次点击结果:", res3); // 应该返回 2
}, 1200);
// 3. 取消功能
console.log("n--- 示例3: 防抖取消功能 ---");
function fetchData(id) {
console.log(`正在请求数据 ${id}...`);
}
const debouncedFetchData = debounce(fetchData, 1000);
debouncedFetchData(1);
debouncedFetchData(2);
console.log("触发了 debouncedFetchData(1) 和 (2)");
// 模拟用户在等待期间取消操作
setTimeout(() => {
debouncedFetchData.cancel();
console.log("防抖已取消，数据请求不会执行！");
}, 500);
// 4. `this` 上下文和参数传递
console.log("n--- 示例4: `this` 上下文和参数传递 ---");
const myObject = {
name: "TestObject",
log: function(message) {
console.log(`[${this.name}] ${message}`);
}
};
const debouncedLog = debounce(myObject.log, 300);
debouncedLog.call(myObject, "Message 1");
debouncedLog.call(myObject, "Message 2");
debouncedLog.call(myObject, "Message 3"); // 300ms 后，应该以 myObject 为 this 打印 Message 3
setTimeout(() => {
console.log("等待 debouncedLog 结束...");
}, 500);
// 预期输出：
// --- 示例1: 基本防抖 (非立即执行) ---
// 等待防抖结束...
// 搜索框输入: hello
// --- 示例2: 立即执行防抖 ---
// 按钮点击了 1 次 (立即执行)
// 第一次点击结果: 1
// 第二次点击结果: 1
// 按钮点击了 2 次 (立即执行)
// 第三次点击结果: 2
// --- 示例3: 防抖取消功能 ---
// 触发了 debouncedFetchData(1) 和 (2)
// 防抖已取消，数据请求不会执行！
// --- 示例4: `this` 上下文和参数传递 ---
// 等待 debouncedLog 结束...
// [TestObject] Message 3应用场景举例
- 搜索框输入： 用户在搜索框中输入时，只有当用户停止输入一段时间后才发起搜索请求。
- 窗口大小调整（
window.resize）： 当用户调整浏览器窗口大小时，只在调整停止后才重新计算布局或渲染。 - 表单验证： 用户输入表单字段时，只有在输入停顿后才触发验证，而不是每次按键都验证。
- 拖拽事件： 当元素被拖拽时，只在拖拽结束或停顿后才处理位置更新。
- 自动保存： 用户编辑文档时，只有在停止编辑一段时间后才自动保存。
代码分析与思考
- 闭包：
timeoutId和result变量被debounce函数返回的debounced函数所引用，形成了闭包。这使得它们在debounce函数执行完毕后仍然存在于内存中，并在多次调用debounced函数时保持状态。 this和arguments： 通过apply或call方法，我们可以显式地控制函数的执行上下文 (this) 和参数 (arguments)，这对于保持函数行为一致性至关重要。- 副作用： 防抖函数本身是为了控制原始函数的副作用（如网络请求、DOM操作）的频率。它通过引入时间延迟和状态管理，将高频的瞬时事件转化为低频的延迟事件。
节流（Throttle）：控制执行频率的闸门
问题背景
现在考虑另一种场景：用户在浏览一个长页面时快速滚动鼠标滚轮。scroll 事件会以极高的频率触发，每秒可能触发数十次甚至上百次。如果我们在 scroll 事件的回调中执行复杂的计算或DOM操作（例如无限滚动加载更多内容、计算滚动位置以显示/隐藏返回顶部按钮），同样会导致严重的性能问题。
类似的场景还有：
- 高频点击事件： 用户连续多次点击一个按钮，但我们只想在一定时间内只响应一次点击（防止重复提交）。
- 鼠标移动（
mousemove）事件： 比如在画布上绘制时，需要实时更新鼠标位置，但不需要每毫秒都更新。 - 游戏中的射击操作： 限制玩家的射击频率，避免过快射击。
这些场景的共同特点是：我们希望在用户持续操作的过程中，以一个固定的频率来执行某个函数，而不是等到操作停止。这就是节流的作用。
核心思想
节流的核心思想是：在指定的时间间隔内，无论事件触发多少次，回调函数都只执行一次。
简单来说，就是“你尽管触发，我每隔一段时间就执行一次”。
两种常见实现策略
节流主要有两种实现策略：时间戳（Timestamp）法和定时器（Timer）法。它们各有特点。
1. 时间戳（Timestamp）法
- 原理： 当事件第一次触发时，记录当前时间戳。此后每次触发，都用当前时间戳减去上次执行的时间戳。如果差值大于设定的时间间隔，则执行回调函数，并更新上次执行的时间戳。
- 特点： 事件会立即执行一次，并且在事件停止触发后不会再执行。
/**
* @description 节流函数实现 (时间戳法)
* @param {Function} func - 需要节流的函数
* @param {number} interval - 节流的时间间隔（毫秒）
* @returns {Function} 返回一个节流后的新函数
*/
function throttleTimestamp(func, interval) {
let lastExecutionTime = 0; // 上次函数执行的时间戳
return function(...args) {
const context = this;
const now = Date.now();
// 如果当前时间距离上次执行时间超过了设定的间隔
if (now - lastExecutionTime > interval) {
func.apply(context, args);
lastExecutionTime = now; // 更新上次执行时间
}
};
}
// 示例应用
function handleScrollTimestamp(event) {
console.log(`滚动事件触发 (时间戳法), 滚动位置: ${window.scrollY}`);
}
const throttledScrollTimestamp = throttleTimestamp(handleScrollTimestamp, 1000); // 每 1 秒最多执行一次
// 模拟滚动事件的高频触发
let scrollCountTimestamp = 0;
const intervalIdTimestamp = setInterval(() => {
scrollCountTimestamp++;
if (scrollCountTimestamp <= 5) { // 模拟滚动 5 次
throttledScrollTimestamp();
} else {
clearInterval(intervalIdTimestamp);
console.log("时间戳法模拟滚动结束。");
}
}, 200); // 每 200ms 触发一次，比 1000ms 间隔短
// 预期：立即执行一次，之后每秒执行一次，停止后不再执行。
// 0ms: 执行
// 200ms: 不执行
// 400ms: 不执行
// 600ms: 不执行
// 800ms: 不执行
// 1000ms: 执行
// 1200ms: 不执行
// 1400ms: 不执行
// 1600ms: 不执行
// 1800ms: 不执行
// 2000ms: 执行
// ...直到模拟结束，停止后不会有额外的执行。2. 定时器（Timer）法
- 原理： 当事件第一次触发时，设置一个定时器。在定时器回调中执行函数。如果在定时器结束前再次触发事件，则忽略。只有当定时器执行完毕并清除后，才能再次设置新的定时器。
- 特点： 事件不会立即执行，而是在设定的时间间隔后执行。并且在事件停止触发后，会额外执行一次。
/**
* @description 节流函数实现 (定时器法)
* @param {Function} func - 需要节流的函数
* @param {number} interval - 节流的时间间隔（毫秒）
* @returns {Function} 返回一个节流后的新函数
*/
function throttleTimer(func, interval) {
let timeoutId = null; // 定时器ID
return function(...args) {
const context = this;
// 如果当前没有定时器在运行，则设置一个
if (!timeoutId) {
timeoutId = setTimeout(() => {
func.apply(context, args);
timeoutId = null; // 执行完毕后清除定时器ID，允许下一次设置
}, interval);
}
};
}
// 示例应用
function handleScrollTimer(event) {
console.log(`滚动事件触发 (定时器法), 滚动位置: ${window.scrollY}`);
}
const throttledScrollTimer = throttleTimer(handleScrollTimer, 1000); // 每 1 秒最多执行一次
// 模拟滚动事件的高频触发
let scrollCountTimer = 0;
const intervalIdTimer = setInterval(() => {
scrollCountTimer++;
if (scrollCountTimer <= 5) { // 模拟滚动 5 次
throttledScrollTimer();
} else {
clearInterval(intervalIdTimer);
console.log("定时器法模拟滚动结束。");
}
}, 200); // 每 200ms 触发一次
// 预期：
// 0ms: 设置定时器
// 200ms: 定时器已存在，忽略
// 400ms: 定时器已存在，忽略
// 600ms: 定时器已存在，忽略
// 800ms: 定时器已存在，忽略
// 1000ms: 定时器触发，执行函数，清除定时器
// 1200ms: 模拟滚动结束，不再触发。但由于最后一个定时器是在 800ms 处设置的，它会在 1800ms 处触发。
// 实际：在 1000ms 左右执行一次。如果在 800ms 触发时设置的定时器，会在 1800ms 执行。
// 关键在于：它会在事件流结束后的 interval 时间后执行一次。从上面的例子可以看出，时间戳法和定时器法各有优劣。时间戳法确保了第一次立即执行，但事件结束后不会再执行；定时器法确保了最后一次一定会执行，但第一次不会立即执行。在实际应用中，我们常常需要结合这两种策略，提供更灵活的选项。
改进与增强
为了提供一个更健壮、更灵活的节流函数，我们需要像防抖函数一样，考虑 this 上下文、参数传递、取消功能以及返回值。更重要的是，我们需要提供选项来控制是“在开始时执行”（leading）还是“在结束时执行”（trailing），或者两者都执行。
1. 统一接口：leading 和 trailing 选项
leading(Boolean): 默认为true。如果为true，则在事件的开始边界立即执行一次。trailing(Boolean): 默认为true。如果为true，则在事件的结束边界执行一次。- 需要注意，不能
leading和trailing都为false，否则函数将永不执行。
2. 处理 this 上下文与参数
同防抖函数，使用 apply 或 call 确保 this 和参数的正确传递。
3. 取消功能（Cancel Functionality）
提供一个 cancel 方法，可以随时清除当前的定时器，使得等待中的函数不再执行。
4. 返回值
节流函数也应该能够返回原始函数的执行结果。这通常涉及到一个 result 变量来存储每次执行的结果。
完整版 Throttle 代码
/**
* @description 增强版节流函数实现，支持 `this` 和参数传递，`leading`/`trailing` 选项，以及取消功能
* @param {Function} func - 需要节流的函数
* @param {number} interval - 节流的时间间隔（毫秒）
* @param {object} [options] - 配置选项
* @param {boolean} [options.leading=true] - 是否在事件开始时立即执行
* @param {boolean} [options.trailing=true] - 是否在事件结束时再执行一次
* @returns {Function & {cancel: Function}} 返回一个节流后的新函数，并带有 `cancel` 方法
*/
function throttle(func, interval, options = {}) {
let timeoutId = null; // 定时器ID
let lastExecutionTime = 0; // 上次函数执行的时间戳
let result = null; // 存储函数执行结果
let lastArgs = null; // 存储最后一次调用的参数
let lastContext = null; // 存储最后一次调用的上下文
// 默认选项
const { leading = true, trailing = true } = options;
// 如果 leading 和 trailing 都为 false，则函数不会执行，抛出错误或设置默认值
if (leading === false && trailing === false) {
// 或者直接设置 leading = true 作为默认行为
console.warn("Throttle: 'leading' and 'trailing' cannot both be false. Setting 'leading' to true.");
options.leading = true;
}
/**
* @description 内部执行函数，用于处理 func 的调用逻辑
*/
const invokeFunc = function(time) {
lastExecutionTime = time;
result = func.apply(lastContext, lastArgs);
lastArgs = null;
lastContext = null;
};
/**
* @description 处理定时器结束后的逻辑
*/
const timerCallback = function() {
// 如果 trailing 为 true 且在定时器等待期间有新的触发，则执行最后一次
if (trailing && lastArgs) {
invokeFunc(Date.now()); // 执行最后一次调用
timeoutId = setTimeout(timerCallback, interval); // 重新设置定时器，等待下一个间隔
} else {
timeoutId = null; // 否则，清除定时器ID
}
};
/**
* @description 节流后的函数
* @param {...any} args - 传递给原始函数的参数
* @returns {any} 原始函数的执行结果
*/
const throttled = function(...args) {
const now = Date.now();
lastArgs = args;
lastContext = this;
// 如果不是第一次执行 (即 lastExecutionTime 为 0)，且 leading 为 true，则立即执行
if (!lastExecutionTime && !leading) {
lastExecutionTime = now; // 第一次不执行，但也要更新时间戳，以便后续计算
}
// 计算距离下次允许执行的时间
const remaining = interval - (now - lastExecutionTime);
// 如果当前时间已经超过了允许的间隔，或者 remaining 小于 0 (表示时间戳已经落后了)
if (remaining <= 0 || remaining > interval) {
// 清除之前的定时器，因为我们要立即执行
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
lastExecutionTime = now; // 更新上次执行时间
invokeFunc(now); // 立即执行
} else if (!timeoutId && trailing) {
// 如果没有定时器在运行，且允许 trailing 执行，则设置一个定时器
// 这确保了在事件停止后，如果 interval 还没到，会在 interval 后执行一次
timeoutId = setTimeout(timerCallback, remaining);
}
return result;
};
/**
* @description 取消当前正在等待的节流函数执行
*/
throttled.cancel = function() {
clearTimeout(timeoutId);
timeoutId = null;
lastExecutionTime = 0;
lastArgs = null;
lastContext = null;
result = null;
};
return throttled;
}
// --- 示例应用 ---
// 1. 默认节流 (leading 和 trailing 都为 true)
console.log("--- 示例1: 默认节流 (leading: true, trailing: true) ---");
function scrollHandler(event) {
console.log(`滚动事件 (默认节流), 滚动位置: ${window.scrollY || 0}`);
}
const throttledScrollDefault = throttle(scrollHandler, 1000); // 每 1 秒最多执行一次
// 模拟持续滚动
let scrollCount1 = 0;
const intervalId1 = setInterval(() => {
scrollCount1++;
if (scrollCount1 <= 5) {
throttledScrollDefault();
} else {
clearInterval(intervalId1);
console.log("默认节流模拟滚动结束。");
}
}, 200);
// 预期：
// 0ms: 立即执行 (leading)
// 200ms, 400ms, 600ms, 800ms: 被节流
// 1000ms: 执行 (新的 leading)
// ...
// 1000ms 后，如果还有触发，会再等 1000ms 执行。
// 最后一次触发后的 1000ms 内，会执行一次 (trailing)
// 2. 只在开始时执行 (leading: true, trailing: false)
console.log("n--- 示例2: 只在开始时执行 (leading: true, trailing: false) ---");
function clickHandler(id) {
console.log(`按钮 ${id} 被点击 (只在开始时执行)`);
}
const throttledClickLeading = throttle(clickHandler, 1000, { leading: true, trailing: false });
throttledClickLeading(1); // 立即执行
throttledClickLeading(2); // 1秒内被忽略
throttledClickLeading(3); // 1秒内被忽略
setTimeout(() => throttledClickLeading(4), 1200); // 1秒后，再次立即执行
setTimeout(() => console.log('等待 leading 节流结束...'), 2500);
// 3. 只在结束时执行 (leading: false, trailing: true)
console.log("n--- 示例3: 只在结束时执行 (leading: false, trailing: true) ---");
function resizeHandler(width) {
console.log(`窗口宽度调整为 ${width} (只在结束时执行)`);
}
const throttledResizeTrailing = throttle(resizeHandler, 1000, { leading: false, trailing: true });
throttledResizeTrailing(100); // 不会立即执行，设置定时器
throttledResizeTrailing(200); // 清除旧定时器，设置新定时器
throttledResizeTrailing(300); // 清除旧定时器，设置新定时器
setTimeout(() => {
console.log('等待 trailing 节流结束...');
}, 500);
setTimeout(() => {
throttledResizeTrailing(400); // 最后一次触发，会设置一个定时器在 1000ms 后执行
}, 700);
// 预期：在最后一次触发（400）的 1000ms 后执行一次 resizeHandler(400)
// 4. 取消功能
console.log("n--- 示例4: 节流取消功能 ---");
function submitForm(data) {
console.log(`提交表单: ${data}`);
}
const throttledSubmit = throttle(submitForm, 2000);
throttledSubmit("data1"); // 立即执行
throttledSubmit("data2");
throttledSubmit("data3");
// 模拟在节流间隔内取消
setTimeout(() => {
throttledSubmit.cancel();
console.log("节流已取消，后续提交不会触发！");
}, 1000); // 在 1000ms 时取消，data2, data3 不会执行
setTimeout(() => {
throttledSubmit("data4"); // 再次触发，会立即执行
}, 3000);
// 预期输出：
// --- 示例1: 默认节流 (leading: true, trailing: true) ---
// 滚动事件 (默认节流), 滚动位置: 0 (0ms)
// 滚动事件 (默认节流), 滚动位置: 0 (1000ms)
// 滚动事件 (默认节流), 滚动位置: 0 (2000ms)
// 滚动事件 (默认节流), 滚动位置: 0 (3000ms)
// 默认节流模拟滚动结束。
// 滚动事件 (默认节流), 滚动位置: 0 (约 3200ms, trailing)
// --- 示例2: 只在开始时执行 (leading: true, trailing: false) ---
// 按钮 1 被点击 (只在开始时执行)
// 等待 leading 节流结束...
// 按钮 4 被点击 (只在开始时执行)
// --- 示例3: 只在结束时执行 (leading: false, trailing: true) ---
// 等待 trailing 节流结束...
// 窗口宽度调整为 400 (只在结束时执行) (约 700 + 1000 = 1700ms)
// --- 示例4: 节流取消功能 ---
// 提交表单: data1
// 节流已取消，后续提交不会触发！
// 提交表单: data4应用场景举例
- 页面滚动加载： 当用户滚动到页面底部时，触发加载更多内容的函数，但要限制加载频率。
- 高频按钮点击： 防止用户在短时间内多次点击提交按钮，导致重复提交表单。
- 鼠标移动（
mousemove）： 比如在游戏或绘图应用中，需要根据鼠标位置更新 UI，但不需要每毫秒都更新。 - 拖拽调整大小： 元素拖拽调整大小时，实时反馈变化，但限制计算频率。
- 游戏中的技能冷却： 限制技能释放频率。
代码分析与思考
- 状态管理：
lastExecutionTime,timeoutId,lastArgs,lastContext都是通过闭包维护的状态，它们共同决定了throttled函数的行为。 leading和trailing的平衡： 通过这两个选项，我们可以灵活地控制节流函数的触发时机，以满足不同的用户体验需求。例如，对于滚动事件，通常会leading: true, trailing: true，确保快速响应和最终状态的更新；对于按钮点击，可能leading: true, trailing: false更合适。- 性能考量： 节流函数通过减少实际执行的次数，显著降低了高频事件对性能的影响。
防抖与节流的对比与选择
防抖和节流都是用于优化高频事件处理的强大技术，但它们解决问题的角度和策略是不同的。理解它们的差异是正确选择和应用的关键。
核心差异
| 特性 | 防抖（Debounce） | 节流（Throttle） |
|---|---|---|
| 触发条件 | 事件停止触发一段时间后才执行 | 在指定时间内，按固定频率执行 |
| 关注点 | “事件结束后再执行” | “事件在持续过程中按频率执行” |
| 执行次数 | 在一次连续的事件流中，只执行一次 | 在一次连续的事件流中，按频率执行多次 |
| 执行时机 | 通常在事件流的末尾（或开始时立即执行一次） | 在事件流的开始、中间和末尾（取决于配置） |
| 典型场景 | 搜索框输入、窗口resize、表单验证、拖拽结束 |
滚动加载、高频点击、鼠标移动、游戏射击 |
| 核心机制 | clearTimeout 重置定时器 |
时间戳比较或定时器锁定 |
| 用户体验 | 等待用户操作“完成”后才响应，减少中间过程的干扰 | 在用户操作“持续过程中”保持响应，提供实时反馈 |
如何选择
选择使用防抖还是节流，取决于你的具体业务需求和希望为用户提供的体验：
-
使用防抖（Debounce）当你需要：
- 在用户完成一系列操作后，只执行一次最终的动作。
- 减少不必要的计算或网络请求，尤其是那些中间状态不重要的操作。
- 例如：用户在输入框中输入文字，你只关心用户最终输入的完整字符串，而不是每个字符。
- 例如：窗口大小调整时，你只关心调整完毕后的最终尺寸。
-
使用节流（Throttle）当你需要：
- 在用户持续进行某个操作时，以一个可控的频率来响应，提供持续的反馈。
- 确保函数在一定时间间隔内至少执行一次（或不超过一次）。
- 例如：用户滚动页面时，你需要每隔一小段时间检查滚动位置，以决定是否加载更多内容或更新导航栏状态。
- 例如：用户频繁点击按钮，你希望第一次点击立即响应，但后续点击在冷却期内被忽略。
在某些情况下，你甚至可能需要结合使用防抖和节流。例如，一个拖拽事件，你可能希望在拖拽过程中节流更新位置，但在拖拽结束后防抖地保存最终位置。
高阶函数在实际开发中的价值
通过防抖和节流的实现，我们深刻体会到了高阶函数在实际开发中的巨大价值：
- 提升代码质量： 高阶函数允许我们将通用的逻辑（如时间控制、状态管理）与业务逻辑（原始函数的功能）分离。这种分离使得代码更加模块化，提高了可读性、可维护性和可测试性。我们可以将防抖和节流视为一种“函数装饰器”，在不修改原始函数代码的情况下，增强其功能。
- 优化应用性能： 这是防抖和节流最直接的目的。它们有效地减少了不必要的函数执行，降低了CPU和内存的消耗，从而显著提升了用户体验，避免了界面卡顿和资源浪费。
- 促进模块化与复用： 一旦实现了通用的防抖和节流高阶函数，它们就可以在项目中的任何地方复用，而无需为每个高频事件重新编写控制逻辑。这极大地提高了开发效率。
- 培养函数式编程思维： 高阶函数鼓励我们以更抽象、更声明式的方式思考问题。将函数作为参数和返回值，有助于我们从“如何做”转向“做什么”，从而编写出更简洁、更富有表达力的代码。
展望与深入：高阶函数的更多可能
防抖和节流只是高阶函数应用冰山一角。高阶函数是函数式编程的基石，它还支撑着许多其他强大的模式：
- 柯里化（Currying）： 将一个接受多个参数的函数转换成一系列只接受一个参数的函数。
- 函数组合（Function Composition）： 将多个简单的函数组合成一个更复杂的函数，让数据流像管道一样依次经过它们。
- 装饰器模式： 在不改变原有函数或类结构的情况下，动态地添加或修改其行为。防抖和节流本质上就是一种函数装饰器。
- 控制反转与依赖注入： 高阶函数可以用来实现更灵活的依赖管理。
深入理解并熟练运用高阶函数，将为我们打开通往更优雅、更强大、更具弹性的软件设计之门。
编程的艺术，在于精妙的抽象与控制
高阶函数，特别是其在防抖与节流中的应用，展示了编程不仅仅是实现功能，更是一门关于抽象、控制与优化的艺术。通过将函数视为一等公民，我们能够构建出更灵活、更具表现力的代码，有效应对复杂的用户交互和性能挑战。掌握这些模式，意味着我们能够编写出更健壮、更高效、更易于维护的现代应用程序。