函式防抖與函式節流

2021-10-02 05:28:07 字數 578 閱讀 6643

函式防抖:就是將多次執行變為一次執行。舉個例子,當我們在滾動視窗的時候執行一段**,如果滾動一次執行一次的話,我們滾動的可能會很快,這樣顯然是很不合理的。所以我們可以當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。下面我們來實現乙個防抖函式

function debounce(fn,wait)

}//處理函式

function handle()

//滾動事件

window.addeventlistener('scroll',debounce(handle,1000))

函式節流:高頻觸發事件的時候,我們可以在規定時間段內觸發一次。

下面我們來實現一下

1.首次不執行

function throttle(fn,delay=100),delay); }}

2.首次執行

function throttle2(fn,delay=100)

}}

函式防抖與函式節流

函式防抖 debounce 當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...

函式節流與函式防抖

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

函式防抖與函式節流

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