JS的防抖與節流學習筆記

2022-07-26 16:45:17 字數 833 閱讀 3632

防抖(debounce):當持續觸發事件時,在一定的時間段內,只有最後一次觸發的事件才會執行。

例:

function

debounce(fn, wait)

timer =settimeout(fn, wait); }}

function

handle()

window.addeventlistener('scroll', debounce(handle, 1000));

節流(throttle):當持續觸發事件時,已執行的事件在一定時間段內不會再次執行。實現節流有時間戳和定時器兩種方式。

例:

//

時間戳:

var throttle = function

(func, delay) }}

function

handle()

window.addeventlistener('scroll', throttle(handle, 1000));

//

定時器:

var throttle = function

(func, delay) , delay);}}

}function

handle()

window.addeventlistener('scroll', throttle(handle, 1000));

函式防抖和節流都是防止某一事件被頻繁觸發;區別:防抖是將多次執行變為最後一次執行,節流是將多次執行變為一段時間只執行一次

應用場景:視窗resize、頁面scroll、拖拽、限時搶購、實時搜尋等。

js防抖與節流

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

js節流與防抖

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

js 的防抖與節流

在進行視窗的resize scroll,輸入框內容校驗等操作時,如果事件處理函式呼叫的頻率無限制,會加重瀏覽器的負擔,導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率,同時又不影響實際效果。函式防抖 debounce 當持續觸發事件時,一...