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

2021-10-04 20:35:52 字數 1627 閱讀 3178

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

我們了解了函式防抖與函式節流的思路後,我們現在來將他們封裝起來,提高**復用性。

cb 要處理防抖的函式

time 預設的高頻間隔時間

isstart 是否在頭部執行

函式防抖封裝:呼叫debounce 函式,返回乙個處理過防抖的函式

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

>

#box

style

>

head

>

>

"box"

>

div>

>

function

debounce

(cb,delay =

200,isstart =

false

) timer =

settimeout((

)=>

,delay)}}

box.onmousemove =

debounce

((e)

=>

,200

,true);

script

>

body

>

html

>

函式節流封裝:

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

documenttitle

>

>

#box

style

>

head

>

>

"box"

>

div>

>

function

throttle

(cb,interval=

200,isstart=

false

) isstart&&cb.

(this

,arg)

; timer =

settimeout((

)=>

,interval)}}

box.onmousemove =

throttle

(function

(e),

500)

script

>

body

>

html

>

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

函式防抖 在對於函式高頻次執行時,只執行一次。有兩種情況 1.尾部執行 高頻次觸發時,只執行最後一次 2.頭部執行 高頻次觸發時,只執行第一次 尾部執行實現很簡單,先設乙個定時器,一開始觸發的時候我不執行,稍微延遲一會後再執行,當你下次執行時,我把上一次的定時器消失,這樣就只會執行最後一次了。防抖尾...

函式防抖和函式節流

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

函式防抖和函式節流

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