函式的節流:預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期
函式防抖:當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間
應用場景:函式節流(throttle)與 函式防抖(debounce)都是為了限制函式的執行頻次,以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率,出現延遲,假死或卡頓的現象。
可以拿我們平時坐電梯為例來形象地表述二者的區別
函式防抖:如果有人進電梯(觸發事件),那電梯將在10秒鐘後出發(執行事件***),這時如果又有人進電梯了(在10秒內再次觸發該事件),我們又得等10秒再出發(重新計時)。
函式節流:保證如果電梯第乙個人進來後,10秒後準時運送一次,這個時間從第乙個人上電梯開始計時,不等待,如果沒有人,則不執行
函式防抖:
function
_debounce
(fn, wait) ,wait)
}}
函式節流:
function
_throttle
(fn, wait)
canrun = false;
settimeout(() => , wait);
}}
函式防抖:
//防止持續頻繁觸發時,無法執行
function
_debounce
(fn,wait,time)else,wait);}}
}function
_log
()window.onscroll = _debounce(_log,500,2000)
函式節流:
function
_throttle
(fn, time)
if(timer)
timer = settimeout(function
() , time || 500)
}}function
_log
()window.onscroll = _throttle(_log,500)
防抖與節流方案 函式防抖和節流
在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...
函式防抖與節流
因為在寫前端頁面時需要監控滑鼠滾輪,這導致在很短時間內,會觸發很多次函式,造成頁面卡頓堵塞,正巧自己在看github時看到了這個,所以自己記錄一下。函式防抖就是讓某個函式在上一次執行後,滿足等待某個時間內不再觸發此函式後再執行,而在這個等待時間內再次觸發此函式,等待時間會重新計算。underscor...
函式防抖和節流
在前端開發的過程中,我們經常會需要繫結一些持續觸發的事件,如 resize scroll mousemove 等等,但有些時候我們並不希望在事件持續觸發的過程中那麼頻繁地去執行函式。通常這種情況下我們怎麼去解決的呢?一般來講,防抖和節流是比較好的解決方案。讓我們先來看看在事件持續觸發的過程中頻繁執行...