js防抖和節流

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

一、防抖

//

防抖：短時間連續觸發時，時間期限內函式只執行一次（常用場景：滾動載入）/**
* 1.不立即執行
* 2.短時間連續觸發不執行
*/function debounce(func, ms = 1000) 
//執行的是最後一次
timer = settimeout(() =>, ms)}}
//測試
const task = () => 
const debouncetask = debounce(task, 1000)
window.addeventlistener('scroll', debouncetask)

二、節流

//

節流：時間期限內函式只會執行一次（常用場景：防重複點選）
function throttle(func, ms = 1000) , ms)}}
//測試
const task = () => 
const throttletask = throttle(task, 1000)
window.addeventlistener('scroll', throttletask)

js防抖和節流

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

js 防抖和節流

突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...

js 防抖和節流

很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...