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