就问你，还有谁还区分不明白防抖和节流的定义，还有谁？
两者应用场景的区分
真实的项目中，在不同的场景下灵活切换使用防抖或节流，才会更加减少不必要的资源消耗，更加提高前端应用的性能和响应性。
防抖（Debounce）的应用场景：
- 搜索框输入：当用户在搜索框中输入内容时，可以使用防抖来延迟触发搜索请求。只有在用户停止输入一段时间后才会发送请求，避免频繁的请求发送。
- 窗口调整：当窗口大小调整时，可以使用防抖来优化执行某些操作的频率，例如重新计算布局或重新渲染页面。
- 按钮点击：当用户点击一个按钮时，可以使用防抖来确保只有在用户停止点击一段时间后才会执行相应的操作，避免误操作或重复执行。
节流（Throttle）的应用场景：
- 页面滚动：当用户滚动页面时，可以使用节流来限制触发滚动事件的频率。例如，在滚动过程中只执行某些操作的固定时间间隔，以减少事件处理的次数。
- 鼠标移动：当用户移动鼠标时，可以使用节流来控制触发鼠标移动事件的频率。例如，在一定时间内只执行一次鼠标移动的处理逻辑，避免过多的计算和渲染操作。
- 实时通信：在实时通信应用中，如聊天应用或在线协作工具，可以使用节流来限制发送消息的频率，以避免发送过多的请求或数据。
两者的代码实例（了解即可别纠结）
防抖代码实例如下：
// 防抖：点击查询城市接口
var btn1 = document.querySelector("button");
var timer;
btn1.onclick = function () {
//先清空延时器，然后再去调用接口
clearTimeout(timer);
// 每次点击按钮都会清空延时器,然后重新计时,延迟一秒执行函数
timer = setTimeout(city, 3000);
};
function city() {
ajax({
method: "get",
url: "https://xxx.com/v2/city/lookup",
data: {
location: "青岛",
key: "759cb11054344aaba4b8791ec40274dd",
},
aysn: true,
contentType: "",
success: function (res) {
var obj = JSON.parse(res);
console.log(obj, "请求成功的数据");
},
});
节流代码实例如下：
// 节流：鼠标移动在控制台打印坐标
// fn(3000, handlePrint)
function fn(delay, behavior) {
var timer = null;
return function (val) {
if (!timer) {
timer = setTimeout(function () {
//调用 handlePrint 函数
behavior(val);
timer = null;
}, delay);
}
};
}
function handlePrint(val) {
console.log(val, "我是鼠标坐标");
}
//调用 fn 把 1000 和 handlePrint 这个函数传进去
var handle = fn(3000, handlePrint);
document.addEventListener("mousemove", function (e) {
handle(e.offsetX);
});
只是看看原理，差不多了解即可，不要太纠结，项目中肯定不会这么使用，不然会被喷的。
Vue 等真实项目中，往往都会调用第三方库的函数，具体内容往下看。
常用的防抖节流函数库整理
流行的独立 JavaScript 库：
- Lodash：Lodash 是一个功能强大的 JavaScript 实用工具库，提供了丰富的工具函数，包括 debounce 和 throttle。您可以使用 Lodash 中的 debounce 和 throttle 函数来实现相应的功能。
- Underscore.js：Underscore.js 是另一个流行的 JavaScript 实用工具库，类似于 Lodash，也提供了 debounce 和 throttle 函数，供您使用。
- RxJS：RxJS 是一个响应式编程库，它提供了丰富的操作符和工具函数，包括用于实现防抖和节流的操作符。您可以使用 RxJS 中的 debounceTime 和 throttleTime 操作符来实现相应的功能。
- Async：Async 是一个流程控制库，提供了多种异步操作的工具函数。它也包含了 debounce 和 throttle 函数的实现，供您使用。
- Trottle-Debounce：Trottle-Debounce 是一个提供了防抖和节流函数的 JavaScript 库，它可以用于任何 JavaScript 应用程序，不依赖于特定的框架。
特定于框架的 JavaScript 库：
- VueUse：VueUse 是一个提供常用 Vue.js 自定义函数的库，其中包括了防抖和节流函数的实现。在 VueUse 中，您可以使用 useDebounce 和 useThrottle 这两个自定义函数来实现防抖和节流功能。
import { useDebounce, useThrottle } from '@vueuse/core'; // 防抖 // 在值变化后延迟 500 毫秒触发 const debouncedValue = useDebounce(value, 500); // 节流 // 将函数封装为节流函数，每 300 毫秒触发一次 const throttledFunction = useThrottle(myFunction, 300); // 在 Vue 组件中使用防抖和节流 export default { setup() { const debouncedValue = useDebounce(value, 500); const throttledFunction = useThrottle(myFunction, 300); }, } - React-use：React-use 是一个提供多种自定义 React hooks 的库，其中包括了 useDebounce 和 useThrottle。您可以使用 React-use 中的这些 hooks 在 React 组件中实现防抖和节流功能。