--- tags: Javascript, disqus: hackmd --- # 函數防抖(Debounce) 與 函數節流(Throttle) [js性能優化：徹底弄懂函數防抖和函數節流](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/673167/) --- 前幾天去面試的時候，考卷一發下來其中一題就是要我解釋`函數防抖`與`函數節流`。 當下一個矇到不行，從來是沒聽過這東西啊。 等面試官來，抓到機會就厚臉問一下這個，在經過好心面試官解釋後，大概就知道是怎麼一回事了。 ### 函數防抖 假設我們在input上面設定使用者每輸入一個字我們就幫他判斷一次是否符合條件，在這樣的情況下這個判斷條件就會不斷的被觸發。 這情況是我要的，沒問題，不過這樣會使用比較多的效能。 而如果改成使用者輸入後隔三秒才執行判斷條件，那麼當使用者在連續輸入文字到input時，就可以減少執行條件判斷的次數，藉此做到優化。 ### 函數節流 ```每隔一段時間，就執行一次函式。``` 延續使用這在input上面輸入文字，而我們要做判斷條件的情況。 在這裡可能就會變成當input被focus的時候，去執行某個判斷條件，且這個判斷條件是固定間隔一段時間就執行一次，例如每三秒就執行一次。 --- ```函數防抖```與```函數節流```其目的都是為了減少短時間內會重複觸發的函示次數，藉此降低消耗，提升效能。 能夠使用的地方也不局限於這裡的input判斷，例如：mousemove、resize、scroll 這種會大量觸發的情況下都是可以應用的到。 其實這類想法，在工作上或多或少都有遇過或做過，只是不知道原來這還有個特殊名詞，這次剛好有這機會就記錄起來。