移動端事件(四) 函式防抖和函式節流

2022-09-01 15:18:15 字數 1326 閱讀 9325

函式防抖

在對於函式高頻次執行時,只執行一次。

有兩種情況:

1.尾部執行:高頻次觸發時,只執行最後一次

2.頭部執行:高頻次觸發時,只執行第一次

尾部執行實現很簡單,先設乙個定時器,一開始觸發的時候我不執行,稍微延遲一會後再執行,當你下次執行時,我把上一次的定時器消失,這樣就只會執行最後一次了。

//

防抖尾部執行

let nub = 0;

let timer = 0;

box.onmousemove = function

(),200);

}

頭部執行會複雜一些,這裡我們多新增乙個變數賦值為true,首先先判斷這個變數是否為true;true的話就把事件執行了,執行完後把這個變數設為false。然後在定時器結束後,再把變數設為true。

//

防抖頭部執行

let nub = 0;

let timer = 0;

let isstart = true

; box.onmousemove = function

() cleartimeout(timer);

timer = settimeout(()=>,200);

}

函式節流

函式節流,把執行間隔拉大。

與函式防抖一樣有頭部與尾部執行之分

尾部執行:一樣呼叫定時器,首先判斷定時器是否開始,如果開啟了就不往下執行,定時器沒有開啟再往下執行,執行完後,把定時器歸回0

//

尾部執行

let timer = 0;

box.onmousemove = function

() timer = settimeout(()=>,1000);

}

頭部執行:就是在開啟定時器之前執行,定時器決定的是下次再執行的時候。

//

頭部執行

let timer = 0;

box.onmousemove = function

() console.log(0);

timer = settimeout(()=>,1000);

}

明天將對上面的內容進行封裝,封裝後就可以開箱即用了!

移動端事件(五) 函式防抖和函式節流的封裝

移動端事件 五 函式防抖和函式節流的封裝 我們了解了函式防抖與函式節流的思路後,我們現在來將他們封裝起來,提高 復用性。cb 要處理防抖的函式 time 預設的高頻間隔時間 isstart 是否在頭部執行 函式防抖封裝 呼叫debounce 函式,返回乙個處理過防抖的函式 lang en chars...

函式防抖和函式節流

1 函式防抖 函式防抖是指頻繁觸發的情況下,只有足夠的時間,才執行 一次,函式防防抖的要點也是要乙個settimeout來輔助實現,延遲執行需要跑的 如果方法多次觸發,則把上次記錄的延遲執行 用cleartimeout清理掉,重新開始。如果計時完畢,沒有方法來訪問觸發。則執行 函式防抖的應用場景,最...

函式防抖和函式節流

首先分別用一句話區分函式防抖和節流的區別。函式防抖就是在使用者停下相應動作,並在給定時間過去之後僅被呼叫一次。函式節流是使用者在執行相應動作時,每隔一段時間發一次請求。針對一些頻繁觸發的事件如scroll keyup resize,如果正常繫結事件的話,可能在很短的時間內連續觸發事件,十分影響效能。...