函式防抖與函式節流

2021-07-29 05:21:14 字數 1276 閱讀 5814

函式防抖（debounce）

當呼叫動作過n毫秒後，才會執行該動作，若在這n毫秒內又呼叫此動作則將重新計算執行時間

函式節流（throttle）

預先設定乙個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下乙個新週期

函式節流（throttle）與函式防抖（debounce）都是為了限制函式的執行頻次，以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

比如如下的情況：

可以拿我們平時坐電梯為例來形象地表述二者的區別

函式防抖：如果有人進電梯（觸發事件），那電梯將在10秒鐘後出發（執行事件***），這時如果又有人進電梯了（在10秒內再次觸發該事件），我們又得等10秒再出發（重新計時）。

函式節流：保證如果電梯第乙個人進來後，10秒後準時運送一次，這個時間從第乙個人上電梯開始計時，不等待，如果沒有人，則不執行

函式防抖（debounce）
function _debounce(fn,wait),wait)


}}function _log()


window.onscroll = _debounce(_log,500)
但是，仔細想想，上面的實現方式還是有一定的缺點。如果頁面很長，我們一直在滾動頁面，那_log方法就一直不會被執行。所以我們可以公升級一下上述的防抖方法。

function _debounce(fn,wait,time)else,wait);}}


}function _log()


window.onscroll = _debounce(_log,500,2000)
函式節流（throttle）
function _throttle(fn, time) 


if(timer) 


timer = settimeout(function() , time || 500)


}}function _log()


window.onscroll = _throttle(_log,500)
趕快開啟控制台看下效果吧~

函式節流與函式防抖

這裡以判斷頁面是否滾動到底部為例，普通的做法就是監聽window物件的scroll事件，然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能，因為當在滾動的時候，瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯，而在實際的場景中是不需要這麼做的，在實際場景中可能是這樣的 在滾...

函式防抖與函式節流

前言 有一些瀏覽器事件我們不希望它很頻繁的觸發，如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次，這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...

函式防抖與函式節流

有一些瀏覽器事件可以在很短的事件內快速觸發多次，例如調整視窗大小或向下滾動頁面。例如，如果將事件 繫結到視窗滾動事件上，並且使用者繼續非常快速地向下滾動頁面，你的事件可能會在3秒的範圍內被觸發數千次。這可能會導致一些嚴重的效能問題,如果在面試中討論構建應用程式和事件，如滾動 視窗調整大小，或鍵盤按下...