序言
大家好，我是大澈！
本文約2300+字，整篇閱讀大約需要6分鐘。
本文主要內容分三部分，第一部分是需求分析，第二部分是實現步驟，第三部分是問題詳解。
如果您只需要解決問題，請閱讀第一、二部分即可。
如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。
一、需求分析
當用戶多次頻繁點擊按鈕時，只允許請求一次后端接口，避免重復無用請求。
沒辦法，誰讓我們的客戶就是會1秒點10次的超能力。
二、實現步驟
1、選擇防抖，還是節流？
對于控制事件觸發的頻率，我們應該很容易的就會想到JS中的防抖和節流。
防抖（Debounce）和節流（Throttle）是前端開發中最常用的優化處理方式，相信大家也都會使用。
但是如果談起兩者定義的區分，以及兩者應用場景的不同，就會有朋友吐槽：“我靠，這不都一樣嘛！”。
所以，我們到底要怎么選擇呢？
2、兩者定義的區分
簡單的定義區分：
- 防抖是一段時間內，多次執行變為只執行最后一次。
- 節流是一段時間內，多次執行變為只執行第一次。
詳細的定義區分：
- 防抖（debounce）是指在一段時間內多次觸發相同事件時，只執行最后一次觸發的事件。
- 這意味著，在一系列觸發事件中，如果在指定的時間間隔內，發生了新的觸發事件，那么前面的觸發事件將被忽略，只有最后一次觸發事件會被執行。
- 節流（throttle）是指在一段時間內多次觸發相同事件時，只執行一次事件。
- 這意味著，無論觸發事件發生多少次，在指定的時間間隔內只會執行第一次事件。
最后，再搭配上“大澈原創”之無敵美麗動人草圖：
就問你，還有誰還區分不明白防抖和節流的定義，還有誰？
3、兩者應用場景的區分
真實的項目中，在不同的場景下靈活切換使用防抖或節流，才會更加減少不必要的資源消耗，更加提高前端應用的性能和響應性。
防抖（Debounce）的應用場景：
- 搜索框輸入：當用戶在搜索框中輸入內容時，可以使用防抖來延遲觸發搜索請求。只有在用戶停止輸入一段時間后才會發送請求，避免頻繁的請求發送。
- 窗口調整：當窗口大小調整時，可以使用防抖來優化執行某些操作的頻率，例如重新計算布局或重新渲染頁面。
- 按鈕點擊：當用戶點擊一個按鈕時，可以使用防抖來確保只有在用戶停止點擊一段時間后才會執行相應的操作，避免誤操作或重復執行。
節流（Throttle）的應用場景：
- 頁面滾動：當用戶滾動頁面時，可以使用節流來限制觸發滾動事件的頻率。例如，在滾動過程中只執行某些操作的固定時間間隔，以減少事件處理的次數。
- 鼠標移動：當用戶移動鼠標時，可以使用節流來控制觸發鼠標移動事件的頻率。例如，在一定時間內只執行一次鼠標移動的處理邏輯，避免過多的計算和渲染操作。
- 實時通信：在實時通信應用中，如聊天應用或在線協作工具，可以使用節流來限制發送消息的頻率，以避免發送過多的請求或數據。
4、兩者的代碼實例（了解即可別糾結）
防抖代碼實例如下：
// 防抖：點擊查詢城市接口
var btn1 = document.querySelector("button");
var timer;
btn1.onclick = function () {
//先清空延時器，然后再去調用接口
clearTimeout(timer);
// 每次點擊按鈕都會清空延時器,然后重新計時,延遲一秒執行函數
timer = setTimeout(city, 3000);
};
function city() {
ajax({
method: "get",
url: "https://geoapi.qweather.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等真實項目中，往往都會調用第三方庫的函數，具體內容見第三部分。
三、問題詳解
1、常用的防抖節流函數庫整理
流行的獨立JAVAScript 庫：
- Lodash (https://lodash.com/)：Lodash 是一個功能強大的 JavaScript 實用工具庫，提供了豐富的工具函數，包括 debounce 和 throttle。您可以使用 Lodash 中的 debounce 和 throttle 函數來實現相應的功能。
- Underscore.js (https://underscorejs.org/)：Underscore.js 是另一個流行的 JavaScript 實用工具庫，類似于 Lodash，也提供了 debounce 和 throttle 函數，供您使用。
- RxJS (https://rxjs.dev/)：RxJS 是一個響應式編程庫，它提供了豐富的操作符和工具函數，包括用于實現防抖和節流的操作符。您可以使用 RxJS 中的 debounceTime 和 throttleTime 操作符來實現相應的功能。
- Async (https://caolan.Github.io/async/)：Async 是一個流程控制庫，提供了多種異步操作的工具函數。它也包含了 debounce 和 throttle 函數的實現，供您使用。
- Trottle-Debounce (https://github.com/niksy/throttle-debounce)：Trottle-Debounce 是一個提供了防抖和節流函數的 JavaScript 庫，它可以用于任何 JavaScript 應用程序，不依賴于特定的框架。
特定于框架的JavaScript 庫：
- VueUse (https://vueuse.org/)：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 (https://github.com/streamich/react-use)：React-use 是一個提供多種自定義 React hooks 的庫，其中包括了 useDebounce 和 useThrottle。您可以使用 React-use 中的這些 hooks 在 React 組件中實現防抖和節流功能。
