在前端開發中，有一些持續觸發的事件，如 resize，scroll，mousemove，input等，但有時我們不希望在持續觸發的過程中那麼頻繁的去執行函式。
所以，我們可以用防抖和節流來解決。
來看例子：
dom結構：
class
="box"
>
沒有防抖的input：type
="text"
class
="ipt1"
>
>
有防抖後的input：type
="text"
class
="ipt2"
>
>
有節流後的input：type
="text"
class
="ipt3"
>
>
div>
class
="show"
>
div>
var ipt1 = document.
queryselector
('.ipt1'
)var ipt2 = document.
queryselector
('.ipt2'
)var ipt3 = document.
queryselector
('.ipt3'
)var show = document.
queryselector
('.show'
)
function
ajax()
else}}
}ipt1.
onkeyup
=function()
// 函式防抖 debounce,自定義防抖時間
// callback 是獲取資料的ajax請求
function
debounce
(delay,callback)
,delay)}}
var debounceajax =
debounce
(300
,ajax)
// 進行防抖處理
// 執行防抖後的事件
ipt2.
onkeyup
=function()
應用場景：
來看例子：
// 函式節流
function
throttle
(delay,callback)
,500)}
else}}
var throttleajax =
throttle
(300
,ajax)
ipt3.
onkeyup
=function()
js防抖和節流
在進行視窗的resize scroll，輸入框內容校驗等操作時，如果事件處理函式呼叫的頻率無限制，會加重瀏覽器的負擔，導致使用者體驗非常糟糕。此時我們可以採用debounce 防抖 和throttle 節流 的方式來減少呼叫頻率，同時又不影響實際效果。函式防抖 函式防抖 debounce 當持續觸發...
js 防抖和節流
突然被人問到節流和防抖的區別，一臉大寫的懵逼，一直以為他倆是乙個東西。那趕緊學習一下吧。定義 多次觸發事件後，事件處理函式只執行一次，並且是在觸發操作結束時執行。原理 對事件處理函式做延時執行，如果在設定的時間內再次觸發事件函式，清除定時器 cleartimeout 重新計時。適用場景 乙個輸入框連...
js 防抖和節流
很多 都會提供乙個按鈕 用於返回頂部。這個按鈕只會在滾動到距離頂部一定位置的時候才出現 監聽滾動事件，返回當前到頂部的距離 function showtop window.onscroll showtop 但是執行的時候存在乙個問題 函式預設執行頻率太高，按一次鍵盤的下方向鍵，函式就執行了9次！實際...