函式防抖和節流

2021-09-19 03:59:33 字數 909 閱讀 2409

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize、scroll、mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。

通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。

讓我們先來看看在事件持續觸發的過程中頻繁執行函式是怎樣的一種情況。

html 檔案中**如下

防抖(debounce)

所謂防抖,就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間。

/**

* @desc 函式防抖

* @param func 函式

* @param wait 延遲執行毫秒數

* @param immediate true 表立即執行,false 表非立即執行

*/function debounce(func,wait,immediate) , wait)

}else , wait);}}

}

節流(throttle)

所謂節流,就是指連續觸發事件但是在 n 秒中只執行一次函式。節流會稀釋函式的執行頻率。

/**

* @desc 函式節流

* @param func 函式

* @param wait 延遲執行毫秒數

* @param type 1 表時間戳版,2 表定時器版

*/function throttle(func, wait ,type) else if(type===2)

return function()

}else if(type===2), wait)}}

}}

防抖與節流方案 函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...

函式防抖和節流

在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...