本文內容主要翻譯自issue 中國外大佬對防抖與節流的解釋, 後面補充了自己的理解和總結。
什麼是防抖與節流
防抖和節流是處理“過於頻繁”發生的事情的常用技術。想象一下，你和朋友見面，朋友正在給你講一個故事，但他們說話時很難停下來。假設您想在可能的情況下不打斷他們滿足他們講故事的興致，同時還要回應他們所說的話。 （我知道這可能有點做作，但請耐心等待！）
假設你們永遠不能同時說話。你有幾個策略：
同步
你可以在他們說完每句話時做出回應：
如果您的回覆很短，這可能沒問題。但是，如果您的回答較長，這可能會使他們很難講完這個故事。所以這個策略不是很好。
防抖（Debounced）
你可以等他們停止說話。例如，如果他們停頓的時間足夠長，您就可以開始回應：
如果你的朋友偶爾會停下來，這個策略會很有效。但是，如果他們不停地說了幾分鐘，這根本不會讓你回應：
節流（Throttled）
您可以決定最多每分鐘響應一次。在這裡，您可以計算自己有多久沒有說話了。一旦你一分鐘沒有說話，你就在朋友的下一句話之後插入你的回應：
如果您的朋友希望您在他們講故事時做出回應，但他們不會為您做這件事而製造停頓，則此策略會很有幫助。但是，如果他們中間停頓了一會，但您仍在無緣無故地等待，此時雙方都沒說話，那就尷尬了：
含義解釋
朋友的“句子”是按鈕點選或鍵盤輸入等事件。您的“回應”正在更新螢幕。
當使用者做某事太快（例如打字）時，響應每個單獨事件更新螢幕太慢。因此，您可以使用防抖或節流，要麼等待使用者停止輸入（防抖），要麼每隔一段時間更新一次螢幕，比如每秒一次（節流）。
補充舉例
遊戲中：防抖就是 B 回城，以按下的最後一下為準。節流就是 QWER，按一下再按得等技能冷卻才能再按。
生活中：假設電梯有兩種執行策略 防抖和 節流，超時設定為 15 秒，不考慮容量限制。
電梯第一個人進來後，15 秒後準時運送一次，這是節流
電梯第一個人進來後，等待 15 秒。如果過程中又有人進來，15 秒等待重新計時，直到 15 秒後開始運送，這是防抖
程式設計中：搜尋頁面,使用者連續輸入,等停下來再去觸發搜尋介面，這是防抖。
美團後臺位置服務不能過於頻繁地呼叫後臺更新使用者位置，必須以特定頻率呼叫後端介面，這就是節流。
定義總結
防抖: n 秒後在執行該事件，若在 n 秒內被重複觸發，則重新計時，所以防抖是操作時不執行不操作時執行。
節流: 高頻事件觸發，但在 n 秒內只會執行一次，所以節流會稀釋函式的執行頻率，到時候了必須執行一次。
圖解說明
為什麼防抖有 trailing 模式和 leading 模式?
原因：您可能會發現防抖事件在觸發函式執行之前等待，直到事件停止如此迅速地發生，這讓您感到惱火。（trailing edge 的情況），為什麼不立即觸發函式執行，使其表現得與原始的未防抖處理程式完全一樣？於是就有了 leading edge 的情況。
如果覺得文章對你有幫助，點贊、收藏、關注、評論，一鍵四連支援，你的支援就是我創作最大的動力。
❤️ 本文原創聽蟬 公眾號：碼裡特別有禪 歡迎關注原創技術文章第一時間推送 ❤️