在效能上，防抖和節流還是很重要的，處理不當或者放任不管就容易引起瀏覽器卡死。
我們開發頁面經常會遇到乙個返回頂部的功能。這個按鈕只會在滾動到距離頂部一定位置之後才出現
問題**：
mounted(),
methods: else }}
在執行的時候會發現存在乙個問題：這個函式的預設執行頻率，太！高！了！。然而實際上我們並不需要如此高頻的反饋，畢竟瀏覽器的效能是有限的，不應該浪費在這裡，所以接著討論如何優化這種場景。
基於上述場景，首先提出第一種思路：在第一次觸發事件時，不立即執行函式，而是給出乙個期限值比如500ms，然後：
效果：如果短時間內大量觸發同一事件，只會執行一次函式。
實現：既然前面都提到了計時，那實現的關鍵就在於settimeout這個函式，由於還需要乙個變數來儲存計時，考慮維護全域性純淨，可以借助閉包來實現：
mounted(),
methods:
},handle() else }}
到這裡，已經把防抖實現了，現在給出定義：
繼續思考，使用上面的防抖方案來處理問題的結果是：
但是如果產品同學的期望處理方案是：即使使用者不斷拖動滾動條，也能在某個時間間隔之後給出反饋呢？
解釋：當持續觸發事件時，有規律的每隔乙個時間間隔執行一次事件處理函式。
我們可以把上面的防抖方法中的handlescroll()函式修改為下面**：
handlescroll(fn, delay) }},
js節流與防抖
函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。函式節流 throttle 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次，以優...
js節流防抖
什麼是節流防抖？在學習這個問題前，我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊，很簡單的功能嘛，如下 text id input let input document.getelementbyid input input.addeventlistene...
js防抖節流
第一種 function debounce fn,delay delay 第二種 function debounce fn,delay delay 立即執行就是事件觸發後立即執行，然後超過一段時間沒有觸發事件，執行函式才會被觸發執行 function fn,delay timer settimeou...