好的，各位编程界的“弄潮儿”们，今天咱们来聊聊两个听起来高大上，实则“接地气”的优化技巧：函数防抖（Debouncing）与节流（Throttling）。它们就像一对“哼哈二将”，专门对付那些“上蹿下跳”的高频事件，让我们的程序跑得更稳、更流畅。
开场白：高频事件的“烦恼”
想象一下，你正在开发一个搜索框，用户每输入一个字，就要向服务器发送一次请求，这简直是“丧心病狂”啊！不仅浪费服务器资源，还可能导致用户体验极差。或者，你正在做一个滚动加载的功能，用户稍微滚动一下，就加载更多数据，这也会造成不必要的性能损耗。
这些“疯狂”的事件，我们称之为高频事件。它们就像一群吵闹的孩子，不停地敲打着你的代码，让你头昏脑涨。那么，如何才能“驯服”这些熊孩子呢？答案就是：函数防抖与节流。
第一章：函数防抖（Debouncing）：王者归来，一锤定音
1.1 什么是函数防抖？
函数防抖就像一个“王者”，它会等待一段时间，如果这段时间内没有新的事件发生，才会执行真正的操作。简单来说，就是“你动我也动，但最后只听我的！”。
你可以把函数防抖想象成电梯关门前的“等待”：电梯门打开后，如果有人进来，电梯会重新计时，直到一段时间内没有人进入，才会关门。这样可以避免频繁开关门，提高效率。
1.2 防抖的原理：延迟执行，只执行最后一次
防抖的核心思想是：延迟执行，只执行最后一次。当事件触发时，我们不会立即执行函数，而是设置一个定时器。如果在定时器到期之前，再次触发了相同的事件，我们会清除之前的定时器，并重新设置一个新的定时器。只有当定时器真正到期时，才会执行函数。
1.3 代码实现：手把手教你写防抖
function debounce(func, delay) {
let timer = null; // 用于存储定时器的变量
return function(...args) {
// 1. 清除之前的定时器
if (timer) {
clearTimeout(timer);
}
// 2. 创建一个新的定时器
timer = setTimeout(() => {
// 3. 定时器到期后，执行真正的函数
func.apply(this, args); // 使用 apply 确保 `this` 指向正确
// 4. 清空定时器
timer = null;
}, delay);
};
}
// 示例：
function search(keyword) {
console.log("Searching for:", keyword);
}
const debouncedSearch = debounce(search, 300); // 延迟 300 毫秒
// 模拟用户输入
debouncedSearch("a");
debouncedSearch("ab");
debouncedSearch("abc");
debouncedSearch("abcd"); // 最终只会执行这一次代码解读：
debounce(func, delay)：接受两个参数，func是需要防抖的函数，delay是延迟的时间（毫秒）。timer：用于存储定时器的变量，初始值为null。return function(...args)：返回一个新的函数，这个函数才是真正被调用的。clearTimeout(timer)：清除之前的定时器，防止重复执行。setTimeout(() => { ... }, delay)：设置一个新的定时器，延迟delay毫秒后执行。func.apply(this, args)：执行真正的函数，并使用apply确保this指向正确。timer = null：清空定时器，方便下次使用。
1.4 防抖的应用场景：用武之地
- 搜索框输入： 在用户停止输入一段时间后，才发送搜索请求，避免频繁请求服务器。
- 窗口大小调整： 在窗口大小调整结束后，才重新计算布局，避免频繁重绘。
- 按钮点击： 防止用户快速点击按钮，造成重复提交。
1.5 防抖的优缺点：扬长避短
- 优点：
- 减少函数执行次数，提高性能。
- 避免不必要的资源浪费。
- 改善用户体验。
- 缺点：
- 可能会延迟函数的执行，不适合对实时性要求高的场景。
第二章：函数节流（Throttling）：细水长流，雨露均沾
2.1 什么是函数节流？
函数节流就像一个“水龙头”，它会限制函数的执行频率，保证在一段时间内只执行一次。简单来说，就是“你动我也动，但有规律地动！”。
你可以把函数节流想象成公交车的发车时间：即使有很多乘客在等待，公交车也会按照固定的时间间隔发车，不会因为人多就频繁发车。
2.2 节流的原理：固定时间内只执行一次
节流的核心思想是：固定时间内只执行一次。当事件触发时，我们会判断是否已经到了可以执行函数的时间。如果到了，就立即执行函数，并更新上次执行的时间。如果在规定的时间内再次触发了事件，我们会忽略这次触发，直到下一次可以执行函数的时间到来。
2.3 代码实现：两种节流方式
节流有两种常见的实现方式：时间戳版和定时器版。
2.3.1 时间戳版：
function throttleByTimestamp(func, delay) {
let lastTime = 0; // 上次执行的时间
return function(...args) {
const now = Date.now(); // 当前时间
// 1. 判断是否到了可以执行的时间
if (now - lastTime >= delay) {
// 2. 执行函数
func.apply(this, args);
// 3. 更新上次执行的时间
lastTime = now;
}
};
}
// 示例：
function scrollHandler() {
console.log("Scrolling...");
}
const throttledScroll = throttleByTimestamp(scrollHandler, 200); // 每 200 毫秒执行一次
// 模拟滚动事件
window.addEventListener("scroll", throttledScroll);2.3.2 定时器版：
function throttleByTimeout(func, delay) {
let timer = null; // 用于存储定时器的变量
return function(...args) {
// 1. 判断是否有定时器正在执行
if (!timer) {
// 2. 创建一个新的定时器
timer = setTimeout(() => {
// 3. 定时器到期后，执行函数
func.apply(this, args);
// 4. 清空定时器
timer = null;
}, delay);
}
};
}
// 示例：
function resizeHandler() {
console.log("Resizing...");
}
const throttledResize = throttleByTimeout(resizeHandler, 200); // 每 200 毫秒执行一次
// 模拟窗口大小调整事件
window.addEventListener("resize", throttledResize);代码解读：
throttleByTimestamp(func, delay)：接受两个参数，func是需要节流的函数，delay是延迟的时间（毫秒）。lastTime：用于存储上次执行的时间，初始值为 0。now：当前时间。now - lastTime >= delay：判断是否到了可以执行的时间。throttleByTimeout(func, delay)：接受两个参数，func是需要节流的函数，delay是延迟的时间（毫秒）。timer：用于存储定时器的变量，初始值为null。!timer：判断是否有定时器正在执行。
2.4 两种节流方式的比较：各有千秋
| 特性 | 时间戳版 | 定时器版 |
|---|---|---|
| 执行时机 | 立即执行，然后在延迟时间内忽略后续事件 | 延迟执行，然后在延迟时间内忽略后续事件 |
| 首次执行 | 立即执行 | 延迟执行 |
| 最后一次执行 | 停止触发后，不会再执行 | 停止触发后，还会执行一次 |
| 精确性 | 可能不精确，因为时间戳是瞬间获取的 | 相对精确，因为使用定时器控制执行时间 |
| 适用场景 | 对首次执行有要求的场景，例如：滚动加载 | 对最后一次执行有要求的场景，例如：窗口大小调整 |
2.5 节流的应用场景：大显身手
- 滚动事件： 在用户滚动页面时，每隔一段时间执行一次加载更多数据的操作。
- 窗口大小调整： 在用户调整窗口大小时，每隔一段时间重新计算布局。
- 鼠标移动： 在用户移动鼠标时，每隔一段时间更新鼠标位置。
2.6 节流的优缺点：取舍之道
- 优点：
- 限制函数执行频率，防止过度执行。
- 保证函数在一段时间内只执行一次，避免不必要的资源浪费。
- 改善用户体验。
- 缺点：
- 可能会降低函数的响应速度，不适合对实时性要求高的场景。
第三章：防抖与节流的“爱恨情仇”
3.1 区别：一字之差，谬之千里
防抖和节流都是为了优化高频事件处理，但它们的实现方式和应用场景却有所不同。
- 防抖： 延迟执行，只执行最后一次。适用于对实时性要求不高，只需要最终结果的场景。
- 节流： 固定时间内只执行一次。适用于需要限制执行频率，保证函数在一段时间内只执行一次的场景。
3.2 如何选择：因地制宜，量体裁衣
选择防抖还是节流，取决于具体的应用场景。
- 如果只需要最终结果，可以选择防抖。例如：搜索框输入。
- 如果需要限制执行频率，可以选择节流。例如：滚动事件。
3.3 混合使用：强强联合，天下无敌
在某些情况下，我们可以将防抖和节流混合使用，以达到更好的优化效果。例如：
- 在滚动加载时，可以使用节流来限制加载频率，然后使用防抖来确保用户停止滚动后，再加载最后一次数据。
第四章：进阶之路：lodash 中的防抖与节流
lodash 是一个流行的 JavaScript 工具库，它提供了许多实用的函数，包括防抖和节流。
4.1 lodash 的防抖：_.debounce
const debouncedSearch = _.debounce(search, 300);4.2 lodash 的节流：_.throttle
const throttledScroll = _.throttle(scrollHandler, 200);lodash 的防抖和节流函数提供了更多的选项，例如：
leading：指定是否在延迟开始前调用函数。trailing：指定是否在延迟结束后调用函数。maxWait：指定最大等待时间。
第五章：总结：优化永无止境
函数防抖和节流是优化高频事件处理的两个重要技巧。它们可以有效地减少函数执行次数，避免不必要的资源浪费，提高程序性能，改善用户体验。
但是，优化永无止境。除了防抖和节流，我们还可以使用其他技巧来优化高频事件处理，例如：
- 事件委托： 将事件处理程序绑定到父元素，而不是子元素，减少事件处理程序的数量。
- requestAnimationFrame： 使用
requestAnimationFrame来优化动画和渲染，避免卡顿。 - Web Workers： 将耗时的计算任务放在 Web Workers 中执行，避免阻塞主线程。
希望这篇文章能够帮助你更好地理解和应用函数防抖和节流。记住，优化代码就像“打怪升级”，需要不断学习和实践，才能成为真正的编程高手！ 💪
最后的彩蛋：
记住，代码是写给人看的，顺便让机器执行。所以，写出优雅、易懂的代码，比任何优化技巧都重要。 😊