vue 防抖和節流

2022-08-03 05:48:12 字數 1170 閱讀 2538

函式防抖(debounce):當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。

函式節流(throttle):當持續觸發事件時,保證一定時間段內只呼叫一次事件處理函式。

js**

/*

* * @desc 函式防抖

* @param fn 函式

* @param delay 延遲執行毫秒數 預設0.5s */

export function debounce(fn, delay)

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

}}/*

* * @desc 函式節流

* @param fn 函式

* @param interval 函式執行間隔時間毫秒數 預設1s */

export function throttle(fn, interval) , interval);

} else}}

在vue中使用

<

template

>

<

view

>

<

text

@tap

="clickdebounce()"

>防抖

text

>

<

text

@tap

="clickthrottle()"

>節流

text

>

view

>

template

>

<

script

>

import from

'@/utils/index.js

'export

default

},methods: ,

600),

//節流

clickthrottle: throttle(

function

() ,

800)}}

script

>

執行結果

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新增防抖處理...

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

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