【JavaScript】防抖（debounce）和节流（throttle）

 在 JavaScript 中，lodash 库提供了许多实用的函数来简化编码工作。其中，lodash 中的防抖（debounce）和节流（throttle）是两个常用的函数，用来限制函数的执行频率。合理的使用可以帮助我们在高频触发事件的情况下，控制回调函数的执行频率，提高程序性能。

防抖（debounce）

 防抖函数通过设置一个等待时间，在该时间内多次调用函数时，只会执行最后一次调用，并在等待时间结束后执行。这对于处理频繁触发的事件（如窗口调整、搜索输入）非常有用，可以避免函数过于频繁地执行。
用法示例：

// 引入lodash库
import { debounce } from "lodash";

// 定义一个简单的函数
function onResize() {
  console.log('窗口调整中...');
}

// 使用防抖函数包装函数，并设置等待时间为500毫秒
const debounceResize = debounce(onResize, 500);

// 监听窗口调整事件，并在事件触发时执行防抖函数
window.addEventListener('resize', debounceResize);

 debounceResize函数通过debounce函数包装了onResize函数，并设置了等待时间为500毫秒。当窗口调整事件触发时，会执行debounceResize函数，但只有当停止操作500毫秒后才会执行onResize函数。

节流（throttle）

 节流函数通过设置一个间隔时间，在该时间内多次调用函数时，只会执行第一次调用，并在间隔时间结束后可以再次执行。这对于控制函数在一段时间内的执行次数非常有用，可以避免函数过于频繁地执行。
用法示例：

// 引入lodash库
import { throttle } from "lodash";

// 定义一个简单的函数
function onResize() {
  console.log('窗口调整中...');
}

// 使用节流函数包装函数，并设置间隔时间为1000毫秒
const throttleResize = throttle(onResize, 1000);

// 监听窗口调整事件，并在事件触发时执行节流函数
window.addEventListener('resize', throttleResize);

 throttleResize函数通过throttle函数包装了onResize函数，并设置了间隔时间为1000毫秒。当窗口调整事件触发时，会执行throttleResize函数，但在1000毫秒内再次触发的事件不会执行onResize函数，直到间隔时间结束后可以再次执行。

参数使用（leading、trailing）

 使用lodash的防抖函数和节流函数时，还可以传递额外的参数来自定义它们的行为。传递leading和trailing参数可以控制防抖和节流函数的首次执行行为。

• leading 参数用于控制在防抖函数的等待时间内的首次调用是否立即执行，默认为 false。如果将其设置为 true，则首次调用会立即执行。
• trailing 参数用于控制在防抖函数的等待时间结束后的最后一次调用是否执行，默认为 true。如果将其设置为 false，则最后一次调用不会执行。

用法示例：

import { debounce, throttle } from "lodash";

function onScroll() {
  console.log('滚动事件发生');
}

const debounceScroll = debounce(onScroll, 500, {
  leading: true,
  trailing: false,
});

const throttleScroll = throttle(onScroll, 1000, {
  leading: true,
  trailing: false,
});

window.addEventListener('scroll', debounceScroll);
window.addEventListener('scroll', throttleScroll);

 以上使用中，debounceScroll 函数和 throttleScroll 函数设置了 leading: true 和 trailing: false。这意味着滚动事件首次触发时会立即执行对应的函数，但在等待时间内后续的事件将不会再触发函数的执行。

链接：Lodash 中文文档