節流防抖的區別和應用場景

1. 節流

概念理解

• 設定一個節流閥，每次執行操作前，先判斷節流閥是否為空，當節流閥為空時，表示可以執行下一次操作，否則不能執行下次操作
• 例如：高鐵的衛生間是否被佔用,由紅綠燈控制,假設一個每個人上洗手間要五分鐘,則五分鐘之內別人不可以使用,上一個使用完畢之後,將紅燈設定為綠燈,表示下一個人可以使用了.下一個人在使用洗手間時需要先判斷控制燈是否為綠色,來知曉洗手間是否可用.

應用場景

• 滑鼠不斷觸發某事件時,如點選,只在單位事件內觸發一次.
• 懶載入時要監聽計算滾動條的位置,但不必要每次滑動都觸發,可以降低計算頻率,而不必要浪費CPU資源
• input 框實時搜尋併發送請求展示下拉列表，每隔一秒傳送一次請求 (也可做防抖)

2. 防抖

概念理解

• 設定定時器，當事件觸發後，延遲 n 秒後再執行回撥函式，如果在這 n 秒內再次觸發事件，則重新計時。
• 如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件監聽器），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

應用場景

• 登入發簡訊按鈕，避免使用者多次點擊發起多次請求
• 調整瀏覽器大小 resize 次數過於頻繁，造成計算過多，此時需要一次到位，就用到了防抖
• 文字編輯器實時儲存，當無任何更改操作一秒後進行儲存
• 聯想輸入法，每次輸入之後都有聯想詞彈出，這個控制聯想詞的方法就不可能是輸入框內容一改變就觸發的，他一定是當你結束輸入一段時間之後才會觸發。