序言

大家好，我是大澈！

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

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

如果您只需要解決問(wèn)題，請(qǐng)閱讀第一、二部分即可。

如果您有更多時(shí)間，進(jìn)一步學(xué)習(xí)問(wèn)題相關(guān)知識(shí)點(diǎn)，請(qǐng)閱讀至第三部分。

一、需求分析

當(dāng)用戶(hù)多次頻繁點(diǎn)擊按鈕時(shí)，只允許請(qǐng)求一次后端接口，避免重復(fù)無(wú)用請(qǐng)求。

沒(méi)辦法，誰(shuí)讓我們的客戶(hù)就是會(huì)1秒點(diǎn)10次的超能力。

二、實(shí)現(xiàn)步驟

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

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

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

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

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

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

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

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

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

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

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

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

3、兩者應(yīng)用場(chǎng)景的區(qū)分

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

防抖（Debounce）的應(yīng)用場(chǎng)景：

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

節(jié)流（Throttle）的應(yīng)用場(chǎng)景：

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

4、兩者的代碼實(shí)例（了解即可別糾結(jié)）

防抖代碼實(shí)例如下：

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

btn1.onclick = function () {
//先清空延時(shí)器，然后再去調(diào)用接口
clearTimeout(timer);
// 每次點(diǎn)擊按鈕都會(huì)清空延時(shí)器,然后重新計(jì)時(shí),延遲一秒執(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, "請(qǐng)求成功的數(shù)據(jù)");
},
});

節(jié)流代碼實(shí)例如下：

// 節(jié)流：鼠標(biāo)移動(dòng)在控制臺(tái)打印坐標(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這個(gè)函數(shù)傳進(jìn)去
var handle = fn(3000, handlePrint);

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

只是看看原理，差不多了解即可，不要太糾結(jié)，項(xiàng)目中肯定不會(huì)這么使用，不然會(huì)被噴的。

Vue等真實(shí)項(xiàng)目中，往往都會(huì)調(diào)用第三方庫(kù)的函數(shù)，具體內(nèi)容見(jiàn)第三部分。

三、問(wèn)題詳解

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

流行的獨(dú)立JavaScript 庫(kù)：

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

特定于框架的JavaScript 庫(kù)：

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