在前端開發過程中，會遇到很多實時輸入查詢、滾動條觸發等業務。而這些頻發操作的事件，如果每次觸發都進行執行的話，會造成效能下降、後台的壓力變大，那麼此時就需要使用防抖和節流進行處理。
防抖和節流，見名思義：防抖是防止抖動，節流是節約流量。
防抖（debounce）指的是觸發事件後n秒後才能執行函式，如果在n秒內觸發了事件，則會重新計算執行時間。
持續觸發輸入事件時，並不會立即執行func函式，而是在指定時間delay中沒有再次觸發事件時，才會進行延時執行func函式。
為了更加深入透徹地理解為什麼要進行防抖處理，我們可以先體驗不進行防抖的輸入函式觸發ajax實時請求的情況。
沒有進行防抖處理的：複製**
執行結果：
上面結果所示，只要我們在輸入框中每次輸入值、按下鍵盤，那麼就會觸發一次ajax請求，這對於使用者和開發者而言都是不好的體驗和資源的浪費。此時，我們想到每次使用者輸入文字都是需要一定時間的，那麼我們可以定義在規定時間進行完整輸入才能進行請求，這樣我們可以減輕對後台的壓力。
前面，我們看到對於短時間內頻繁點選或輸入的事件觸發，未使用防抖處理的事件對於使用者體驗並不是很好。因此我們可以使用防抖進行處理，如下：
進行防抖處理的：複製**
執行結果：
從上面的執行結果可以看出，在500ms內輸入文字按下鍵盤都不會觸發請求事件，而是在輸入框的定時器500ms停止輸入後傳送請求。實現原理很簡單，就是對於頻繁輸入的輸入框請求事件新增定時器進行計數，在指定時間內進行頻繁輸入並不會進行ajax請求，而是在指定時間間隔內停止輸入才會執行函式。當停止輸入但在此定時器計數時間內，會重新進行觸發請求事件
節流（throttle）指的是連續觸發事件但是在n秒中只執行一次函式。即不管你在指定時間內觸發多少次函式，但是它只執行一次事件。（只有一次生效）
常見場景：即時查詢
在持續進行觸發輸入事件時，並不會立即執行func的函式請求，而是每隔指定的delay時間後才會執行一次func函式，不管這段時間內你點選了多少次。
進行節流處理的：複製**
執行結果：
從上面可以看到，無論我們在輸入框輸入多少文字，在指定時間內只執行一次函式
函式防抖和函式節流都是防止某一時間內頻繁觸發。
函式防抖是在指定時間只執行一次，而函式節流是每到指定間隔時間執行一次。
函式防抖是將幾次操作合併為一此操作進行，函式節流使得一定時間內只觸發一次函式。
應用場景
防抖debounce
search搜尋聯想，使用者在不斷輸入值時，用防抖來節約請求資源。
window觸發resize的時候，不斷的調整瀏覽器視窗大小會不斷的觸發這個事件，用防抖來讓其只觸發一次
節流throttle
滑鼠不斷點選觸發，mousedown(單位時間內只觸發一次)
監聽滾動事件，比如是否滑到底部自動載入更多，用來判斷。
前端的防抖和節流
防抖和節流都是優化高頻率執行js的方法 dom 結構 123js 結構 var jh 1 var jhbt document.getelementbyid jh 防抖 只有等空閒時間才去執行，比如搜尋框功能，如果快速一直按鍵，難道每輸入乙個鍵就去後台匹配然後渲染嗎？等使用者輸入完整關鍵字在去後台匹配...
前端防抖節流
防抖和節流是前端最基本的效能優化，在繫結監聽事件onmousemove，onmousewheel時，如果觸發過於頻繁，在一次觸發尚未執行完時又再次觸發，就會造成瀏覽器丟幀，進而影響使用者體驗，防抖和節流就是為了解決這個問題。防抖 在事件觸發n秒後再執行這個函式，如果在n秒內又觸發則重新計時 func...
前端防抖與節流
在某些高頻度觸發的事件中繫結操作需要用到節流函式。最常見的打個栗子，如果要在window的滾動事件中傳送ajax請求載入更多資料。有需要的童鞋可以把此段複製到html檔案中自行檢視效果。我們來看看此時頁面的表現效果。此時我們可以看到console.log 1 被高頻度觸發。如果此時scroll裡面觸...