Vue最新防抖方案

2022-10-11 12:30:13 字數 499 閱讀 6635

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

函式節流(throttle):當持續觸發事件時,保證一定時間段內只呼叫一次事件處理函式。節流通俗解釋就比如我們水龍頭放水,閥門一開啟,水嘩嘩的往下流,秉著勤儉節約的優良傳統美德,我們要把水龍頭關小點,最好是如我們心意按照一定規律在某個時間間隔內一滴一滴的往下滴。舉個栗子,持續觸發scroll事件時,並不立即執行handle函式,每隔1000毫秒才會執行一次handle函式。

防抖例項:

>

const delay = (function ()

})()

export default , 500)}}

}>

節流例項:

vue防抖註冊全域性 Vue最新防抖方案 必看篇

函式防抖 debounce 當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函式才會執行一次,如果設定的時間到來之前,又一次觸發了事件,就重新開始延時。舉個栗子,持續觸發scroll事件時,並不執行handle函式,當1000毫秒內沒有觸發scroll事件時,才會延時觸發scroll事件。函式...

vue 防抖例子

第一次用到防抖,有點小激動。在寫vue專案,有乙個需求 使用者更改數量後,由於一些策略原因,我需要呼叫介面讓後台計算後才能獲取最終金額,但使用者可能短時間內改很多次數量,這樣的話多次呼叫介面就很浪費!這時 防抖 就派上用場了。在一段時間內如果多次呼叫同乙個函式,只執行最後一次。data 下面的cha...

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...