Vue 3 0 防抖和節流

2021-10-06 00:28:05 字數 1516 閱讀 8008

專案中遇到了防抖和節流,所以整理一下,並且在3.0中嘗試

防抖:在一段時間內函式只會執行一次,如果在這個時間段內再次觸發函式,則重新計算函式執行時間(可以用作提交事件,防止使用者重複提交)

}<

/div>

"add"

>add<

/button>

<

/template>

import

from

'vue'

export

default

,2000

)return},

}//防抖

function

debounce

(fn, delay)

timer =

settimeout((

)=>

, delay)}}

}

節流:在一段時間內,函式最多可以觸發一次執行(滾動載入的時候,當滑動到底部時,一直滑動那麼每隔一定時間就會執行一次載入)

}<

/div>

}<

/div>

"add"

>add<

/button>

}<

/div>

}<

/div>

x:}, y:

}<

/div>

<

/template>

import

from

'vue'

import usemouse from

'../utils/listenmouse'

export

default

,setup

(props)

=usemouse()

const add =

debounce((

)=>

,2000

)watch

(num,()

=>

)const

=usefeaturex()

onmounted((

)=>

,200),

true)}

)onunmounted((

)=>

)return},

}function

usefeaturex()

)return

torefs

(states)

}//防抖

function

debounce

(fn, delay)

timer =

settimeout((

)=>

, delay)}}

//節流

function

throttle

(fn, delay)

, delay)}}

<

/script>

<

/style>

vue 防抖和節流

函式防抖 debounce 當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。函式節流 throttle 當持續觸發事件時,保證一定時間段內只呼叫一次事件處理函式。js desc 函式防抖 param fn 函式 par...

vue防抖註冊全域性 vue全域性防抖和節流

防抖處理 立即執行 const on vue.prototype.on vue.prototype.on function event,func 500 on.call this,event,newfunc 防抖處理 最後執行 const on vue.prototype.on vue.protot...

vue防抖註冊全域性 vue全域性防抖和節流

函式防抖 防抖分為兩種 一種是立即執行 頻繁觸發事件,第一次觸發時執行函式,後面觸發不會執行,停止觸發,間隔一定時間之後再觸發事件,函式才會再次執行 另一種是後執行 頻繁觸發事件,事件只會在觸發事件之後間隔定義的時間,函式才會被執行,而且只會執行最後一次觸發的事件。在vue中對click新增防抖處理...