120 節流和防抖,Vue中如何新增節流和防抖

2022-03-07 19:21:21 字數 1155 閱讀 8454

試想以下場景:

很多時候,我們不需要實時地去反饋。這對機器的效能要求太高了,並且不太必要,所以有了以下的解決方案:

等喋喋不休的人徹底(並不是永遠,而是泛指一段規定的時間內)安靜下來,我們再闡述道理。

2、節流:假定乙個間隔時間,在持續操作的時候,按照間隔的時間觸發。

有間隔地回覆喋喋不休的人。

接下來我們可以嘗試著優化我們的 js 部分,讓停頓下來後,需要執行的函式,與我們實現防抖的部分分離。

window.onload = function () 

timeout = settimeout(fn, delay)

}} oul.addeventlistener('scroll', debounce(() => , 1000))

}

上面的寫法沒辦法幫我們把 event 傳進去,這裡我們要把當前的作用域也傳進去

window.onload = function () 

timeout = settimeout(() => , delay)

}} oul.addeventlistener('scroll', debounce(function(event) , 1000))

}

window.onload = function ()  else , threshold)}}

} oul.addeventlistener('scroll', throttle(function(event) , 1000))

}

老實說:直接手寫的話,還是要理解透徹點,不然寫不出來。或者,多寫幾次。

以下函式僅是部分**,像better-scroll這樣的元件有傳 pos 的記得要把相應的引數傳進去。

下面用的 debounce 即是我們上面的。

methods: ,

initscroll() )},}

知乎——函式防抖與函式節流

complete.

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