1、前文
函式節流 和 函式防抖 雖然這倆名詞聽起來很抽象，但理解起來卻跟紙老虎似的，不過它們在實際作業中用的頻率確實非常高，因此這兩個名詞概念是必須要掌握的，下面我們開始進入正文，
2、什么是函式節流
假設我們有個搜索輸入框，正常情況下用戶每輸入一次我們就會拿它的值去請求相應資料，如圖：
我們可以看到每按一次 m 就會請求一次，圖中按了 9 次 就會請求 9次，假設有 10w 個人按照這種頻率同時輸入，對于小企業來說服務器應該是扛不住的，解決這個問題也很簡單，既然頻率那么快，那我們就把頻率降低設定每隔 500 毫秒請求一次，而這 500 毫秒期間輸入的都將被忽略，如圖：
我們可以看到，這次輸入 9個 m ，實際請求的只有4次，是的，這就是函式節流，如果你仍然覺得節流這詞很抽象，不妨把它當做是節約會好理解些，
3、什么是函式防抖
假設我們有個提交訂單頁面，正常情況下點擊[提交訂單]會走介面并等待回應，然后根據回應們進行跳轉頁面或其它操作，如圖：
問題來了，如果用戶網路很差，他點了[提交訂單] 后服務器并沒有迅速回應，因此用戶可能誤以沒點就會再點一次[提交訂單]導致產生了兩次提交，再比如用戶點擊[提交訂單]時一不小心多點了幾次，如圖：
圖中可以看到迅速點擊提交時，出現兩次 submit 請求，解決上面問題也很簡單，我們將[提交訂單]設定為只能點擊1次，后續無論怎么點擊都被忽略掉，如圖：
可以看到這次一共點擊了 3 次 [提交訂單]，但只有一次請求，就算你連續點 10W 次，它也只有一次請求，是的，這就是函式防抖
4、函式節流和防抖的應用場景
節流和防抖這概念不止應用于JavaScript 這門語言中，任何語言都會有這兩個概念，這是對性能優化的一種手段所稱呼的名詞，應用十分廣泛，比如提交表單、發送驗證碼等都跟這倆概念息息相關，關于節流或防抖如何選擇得根據需求而定，本質上都是為了優化，
Tip: 函式節流和函式防抖的代碼有很多版本，網上自行搜索即可，這里不再講述，相信你理解這兩個概念之后自己也可以動手實作的，
好了，內容就到這里，
5、總結
節流：降低頻率
防抖：限制次數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/394261.html
標籤：其他
上一篇：必背-13.小程式
下一篇：在svg上填充波形