函式防抖(debounce)
當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間函式節流(throttle)
預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期函式節流(throttle)與函式防抖(debounce)都是為了限制函式的執行頻次,以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率,出現延遲,假死或卡頓的現象。
比如如下的情況:
可以拿我們平時坐電梯為例來形象地表述二者的區別函式防抖:如果有人進電梯(觸發事件),那電梯將在10秒鐘後出發(執行事件***),這時如果又有人進電梯了(在10秒內再次觸發該事件),我們又得等10秒再出發(重新計時)。函式防抖(debounce)函式節流:保證如果電梯第乙個人進來後,10秒後準時運送一次,這個時間從第乙個人上電梯開始計時,不等待,如果沒有人,則不執行
function _debounce(fn,wait),wait)
}}function _log()
window.onscroll = _debounce(_log,500)
函式節流(throttle)
仔細想想,上面的防抖方式還是有一定的缺點。如果頁面很長,我們一直在滾動頁面,那_log方法就一直不會被執行。所以我們可以公升級一下上述的防抖方法。
function _throttle(fn,wait,time)else,wait);}}
}function _log()
window.onscroll = _debounce(_log,500,2000)
其實,這就實現了我們的函式節流。趕快開啟控制台執行一下吧~ 函式防抖與函式節流
函式防抖 debounce 當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...
函式節流與函式防抖
這裡以判斷頁面是否滾動到底部為例,普通的做法就是監聽window物件的scroll事件,然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能,因為當在滾動的時候,瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯,而在實際的場景中是不需要這麼做的,在實際場景中可能是這樣的 在滾...
函式防抖與函式節流
前言 有一些瀏覽器事件我們不希望它很頻繁的觸發,如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次,這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...