序言

大家好，我是大澈！

本文約2300+字，整篇閱讀大約需要6分鐘。

本文主要內容分三部分，第一部分是需求分析，第二部分是實現(xiàn)步驟，第三部分是問題詳解。

如果您只需要解決問題，請閱讀第一、二部分即可。

如果您有更多時間，進一步學習問題相關知識點，請閱讀至第三部分。

一、需求分析

當用戶多次頻繁點擊按鈕時，只允許請求一次后端接口，避免重復無用請求。

沒辦法，誰讓我們的客戶就是會1秒點10次的超能力。

二、實現(xiàn)步驟

1、選擇防抖，還是節(jié)流？

對于控制事件觸發(fā)的頻率，我們應該很容易的就會想到JS中的防抖和節(jié)流。

防抖（Debounce）和節(jié)流（Throttle）是前端開發(fā)中最常用的優(yōu)化處理方式，相信大家也都會使用。

但是如果談起兩者定義的區(qū)分，以及兩者應用場景的不同，就會有朋友吐槽：“我靠，這不都一樣嘛！”。

所以，我們到底要怎么選擇呢？

2、兩者定義的區(qū)分

簡單的定義區(qū)分：

• 防抖是一段時間內，多次執(zhí)行變?yōu)橹粓?zhí)行最后一次。
• 節(jié)流是一段時間內，多次執(zhí)行變?yōu)橹粓?zhí)行第一次。

詳細的定義區(qū)分：

• 防抖（debounce）是指在一段時間內多次觸發(fā)相同事件時，只執(zhí)行最后一次觸發(fā)的事件。
• 這意味著，在一系列觸發(fā)事件中，如果在指定的時間間隔內，發(fā)生了新的觸發(fā)事件，那么前面的觸發(fā)事件將被忽略，只有最后一次觸發(fā)事件會被執(zhí)行。
• 節(jié)流（throttle）是指在一段時間內多次觸發(fā)相同事件時，只執(zhí)行一次事件。
• 這意味著，無論觸發(fā)事件發(fā)生多少次，在指定的時間間隔內只會執(zhí)行第一次事件。

最后，再搭配上“大澈原創(chuàng)”之無敵美麗動人草圖：

就問你，還有誰還區(qū)分不明白防抖和節(jié)流的定義，還有誰？

3、兩者應用場景的區(qū)分

真實的項目中，在不同的場景下靈活切換使用防抖或節(jié)流，才會更加減少不必要的資源消耗，更加提高前端應用的性能和響應性。

防抖（Debounce）的應用場景：

• 搜索框輸入：當用戶在搜索框中輸入內容時，可以使用防抖來延遲觸發(fā)搜索請求。只有在用戶停止輸入一段時間后才會發(fā)送請求，避免頻繁的請求發(fā)送。
• 窗口調整：當窗口大小調整時，可以使用防抖來優(yōu)化執(zhí)行某些操作的頻率，例如重新計算布局或重新渲染頁面。
• 按鈕點擊：當用戶點擊一個按鈕時，可以使用防抖來確保只有在用戶停止點擊一段時間后才會執(zhí)行相應的操作，避免誤操作或重復執(zhí)行。

節(jié)流（Throttle）的應用場景：

• 頁面滾動：當用戶滾動頁面時，可以使用節(jié)流來限制觸發(fā)滾動事件的頻率。例如，在滾動過程中只執(zhí)行某些操作的固定時間間隔，以減少事件處理的次數(shù)。
• 鼠標移動：當用戶移動鼠標時，可以使用節(jié)流來控制觸發(fā)鼠標移動事件的頻率。例如，在一定時間內只執(zhí)行一次鼠標移動的處理邏輯，避免過多的計算和渲染操作。
• 實時通信：在實時通信應用中，如聊天應用或在線協(xié)作工具，可以使用節(jié)流來限制發(fā)送消息的頻率，以避免發(fā)送過多的請求或數(shù)據(jù)。

4、兩者的代碼實例（了解即可別糾結）

防抖代碼實例如下：

// 防抖：點擊查詢城市接口
var btn1 = document.querySelector("button");
var timer;

btn1.onclick = function () {
//先清空延時器，然后再去調用接口
clearTimeout(timer);
// 每次點擊按鈕都會清空延時器,然后重新計時,延遲一秒執(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é)流代碼實例如下：

// 節(jié)流：鼠標移動在控制臺打印坐標
// fn(3000, handlePrint)
function fn(delay, behavior) {
var timer = null;
return function (val) {
if (!timer) {
timer = setTimeout(function () {
//調用handlePrint函數(shù)
behavior(val);
timer = null;
}, delay);
}
};
}

function handlePrint(val) {
console.log(val, "我是鼠標坐標");
}

//調用fn把1000和handlePrint這個函數(shù)傳進去
var handle = fn(3000, handlePrint);

document.addEventListener("mousemove", function (e) {
handle(e.offsetX);
});

只是看看原理，差不多了解即可，不要太糾結，項目中肯定不會這么使用，不然會被噴的。

Vue等真實項目中，往往都會調用第三方庫的函數(shù)，具體內容見第三部分。

三、問題詳解

1、常用的防抖節(jié)流函數(shù)庫整理

流行的獨立JavaScript 庫：

• Lodash (https://lodash.com/)：Lodash 是一個功能強大的 JavaScript 實用工具庫，提供了豐富的工具函數(shù)，包括 debounce 和 throttle。您可以使用 Lodash 中的 debounce 和 throttle 函數(shù)來實現(xiàn)相應的功能。
• Underscore.js (https://underscorejs.org/)：Underscore.js 是另一個流行的 JavaScript 實用工具庫，類似于 Lodash，也提供了 debounce 和 throttle 函數(shù)，供您使用。
• RxJS (https://rxjs.dev/)：RxJS 是一個響應式編程庫，它提供了豐富的操作符和工具函數(shù)，包括用于實現(xiàn)防抖和節(jié)流的操作符。您可以使用 RxJS 中的 debounceTime 和 throttleTime 操作符來實現(xiàn)相應的功能。
• Async (https://caolan.github.io/async/)：Async 是一個流程控制庫，提供了多種異步操作的工具函數(shù)。它也包含了 debounce 和 throttle 函數(shù)的實現(xiàn)，供您使用。
• Trottle-Debounce (https://github.com/niksy/throttle-debounce)：Trottle-Debounce 是一個提供了防抖和節(jié)流函數(shù)的 JavaScript 庫，它可以用于任何 JavaScript 應用程序，不依賴于特定的框架。

特定于框架的JavaScript 庫：

• VueUse (https://vueuse.org/)：VueUse 是一個提供常用 Vue.js 自定義函數(shù)的庫，其中包括了防抖和節(jié)流函數(shù)的實現(xiàn)。在 VueUse 中，您可以使用 useDebounce 和 useThrottle 這兩個自定義函數(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 組件中實現(xiàn)防抖和節(jié)流功能。