防抖 ( Debounce ) 和節流 ( Thorttle )
會找到這篇文章的你，應該是在近期聽到了這兩個名詞對吧？我其實是在上週的面試過程中被問到了這個對當時的我來說非常陌生的兩個詞。
一起來看什麼是 JS 的防抖和節流吧！
名詞介紹
開門見山的說，這兩種方法其實都是為了降低網頁在短時間內重複觸發 Function 太多次所造成的效能浪費，所以簡而言之他們的出現其實就是為了減少沒必要的監聽事件所觸發的次數。
那下面就來一起看一下防抖和節流分別是怎麼處理這樣的需求的？
防抖 Debounce
什麼是防抖 Debounce ?
當我們所監聽的事件在固定的時間長度內再次被觸發時重新計算該時間長度，直到該時間長度結束時沒有再發生監聽的事件後才會確實執行該函式。
這樣講可能比較抽象，以生活化一點的例子來舉例的話就像是大賣場或是捷運裡面的電扶梯：
當電扶梯的感應器偵測到有人踩上踏階時，它就會持續地運轉讓乘客移動到不同的樓層。但是當它的感應器一段時間（可能是 5 分鐘？我也不確定）都沒有偵測到任何人走到電扶梯的踏階上時，它就會觸發待機模式，並將電扶梯調整為較低的轉速。
所以這邊待機模式的觸發條件設定，就是利用防抖 Debounce 這個概念，否則如果每個乘客中間都一直觸發待機模式然後再重新啟動調整為正常速度的話，這樣對電扶梯也是一種耗損跟耗電的
實際應用範例
所以當你在頁面上快速鍵入許多單字觸發了 keyin 或是 keyup 事件時時，它不會馬上就去資料庫拿出搜尋建議的結果，它會等到你輸入完且沒有再偵測到新的鍵入 event 時才將相關的搜尋建議渲染在 Search bar 下方。
節流 Thorttle
什麼是節流 Thorttle ?
監聽到事件發生且經過一段固定的時間長度後，就會觸發該函式。
我們可以假設固定的時間長度為 5 秒，因此只要在監聽事件成立後這 5 秒內即使再次監聽到新的事件也不會影響它每 5 秒要執行一次的結果。
實際應用範例
結論
就像開頭所說的那樣，防抖跟節流都是為了減少監聽事件過於頻繁的觸發所做的一種設計方式。
其實我們在平常的開發或是 Side project 中可能曾經都有使用過這樣的概念來撰寫我們的 function ，只是從來沒有想過它是基於這兩個關鍵字來達成的。
寫越久的 code 真的越發現自己在不知不覺中也會碰到很多城市設計原則相關的內容呢！
那我們下次見ʘ‿ʘ
