函式的節流和函式的防抖

2021-09-13 21:04:46 字數 878 閱讀 4849

函式的節流和函式的防抖都是優化高頻率執行的函式的一種方法。我們知道瀏覽器中某些計算和處理要比其他昂貴很多。比如dom的操作。當乙個操作dom的函式高頻率執行時,我們可以根據情況進行節流或防抖的處理。

在每個時間段裡,最多隻允許執行一次。比如說resize調整視窗,在調整視窗的過程中,事件一直在高頻率的觸發,我們可以利用節流函式讓其在一定的間隔時間段內最多觸發一次。用乙個形象的比喻吧。生產線上的啤酒瓶排成隊往前跑,乙個行動遲緩的樹懶,每一段時間內只能拿到乙個瓶子。

function throttle (action, delay) 

let elapsed = date.now() - lastrun

let context = this

let args = arguments

let runcallback = function ()

if (elapsed >= delay) else

}}

在高頻呼叫中,只有足夠的空閒時間,**才會執行一次,常見的就是input的change事件,只有停頓輸入的事件大於指定的時間,**才會執行一次。用乙個形象的比喻吧。生活中的聲控燈,只要你不停的說話,燈就不會熄滅,只有你安靜的時間大於一定的值時,燈才會熄滅。

思路:第一次呼叫的時候建立乙個定時器,在指定的間隔時間之後執行**,當第二次呼叫該函式時,清除前一次的定時器並另設定乙個。如果前乙個定時器已經執行了,這個操作就沒任何意義,如果前乙個定時器還沒執行,其實就是將其替換為乙個新的定時器。目的是只有在執行函式的請求停止了一段時間之後才執行。根據以上思路實現乙個防抖函式。

function debounce(action, content, delay), delay);

}}

函式防抖和節流

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

函式防抖和節流

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

函式防抖和節流

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