JS之防抖與節流

首先，我們給滾動事件新增乙個函式，讓他列印當前滾動條的位置，功能就是監聽滾動條距離頂部的位置。

function

showtop()
window.onscroll = showtop

所以我們希望這個事件，觸發的少一些

比如，當我滑動滾動條的時候，多次觸發該事件，我希望最後一次滑動停止之後，兩秒內無繼續滑動，再列印出當前滾輪位置。思路如下

//防抖函式

function
debounce
(fn,delay)
//設定定時器
timer=
settimeout
(fn,delay)
;//無操作時，執行延遲函式，2s後列印結果}}
function
showtop()
window.onscroll =
debounce
(showtop,
2000
)//為滾動條事件繫結防抖函式

核心思想：有定時器都清空，執行一次函式

節流，觸發n秒這個事件，列印結果只每2s列印一次。

防抖，觸發n秒，最後停止觸發2s後列印一次結果，不足2s不列印。

節流函式如下

//節流函式

function
throttle
(fn,delay)
,delay)}}
}function
showtop()
window.onscroll =
throttle
(showtop,
2000
);

核心思想：沒有定時器就建立，執行函式以後再清空。有的話就不管了。也不會觸發函式

參考資料 >

js防抖與節流

在效能上，防抖和節流還是很重要的，處理不當或者放任不管就容易引起瀏覽器卡死。我們開發頁面經常會遇到乙個返回頂部的功能。這個按鈕只會在滾動到距離頂部一定位置之後才出現 問題 mounted methods else 效果圖 在執行的時候會發現存在乙個問題 這個函式的預設執行頻率，太！高！了！然而實際上...

js節流與防抖

函式防抖 debounce 觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。函式節流 throttle 高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。函式節流 throttle 與 函式防抖 debounce 都是為了限制函式的執行頻次，以優...

js節流防抖

什麼是節流防抖？在學習這個問題前，我們先丟擲問題 假設我現在有這麼乙個需求 根據input框輸入內容列印到控制台這個問題簡單啊，很簡單的功能嘛，如下 text id input let input document.getelementbyid input input.addeventlistene...