函式防抖,與函式節流

2022-05-08 08:45:35 字數 821 閱讀 5159

在專案中,我們會經常使用到mouseover,mouseenter,resize,scroll等,這些函式會頻繁的觸發,因此會造成資源浪費。

因此我們需要進行優化,這個時候就需要使用到函式防抖(debounce),或者函式節流(throttle)

1)函式防抖(debounce)

就是指觸發事件後在 n 秒內函式只能執行一次,如果在 n 秒內又觸發了事件,則會重新計算函式執行時間(簡言之:在我們操作結束之後的某乙個時間之後執行一次

var timer = null;

function debounce ()

timer = settimeout(function (),400);

}

2)函式節流

就是指連續觸發事件但是在 n 秒中只執行一次函式(即使不停止操作,他也會一直按固定時間間隔執行)    

var _timer = '';

function thort ()

_timer = settimeout(function () ,1000);

}// 或者

var previous = 0;

function thortnew ()

}

分析:他們的不同?

如果都是使用settimeout去實現的前提下,他們的區別就在於判斷timer是否有值得情況下,是cleartimerout(timer)還是存粹的結束掉函式執行return。

函式防抖與函式節流

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

函式節流與函式防抖

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

函式防抖與函式節流

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