Vue中使用防抖與節(jié)流的方法
何為防抖/節(jié)流
首先先說說何為防抖與節(jié)流
防抖(debounce
)
防抖就是一段時(shí)間內(nèi)會(huì)多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們在不觸發(fā)的多久以后再執(zhí)行該事件,例如鼠標(biāo)移動(dòng)事件(mousemove)、輸入框變更事件(change)等等,這個(gè)時(shí)候我們就需要一個(gè)方法去控制他,一段時(shí)間內(nèi)沒執(zhí)行該事件后,執(zhí)行該事件,即為防抖
節(jié)流(throttle
)
節(jié)流就是短時(shí)間內(nèi)會(huì)多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們既定時(shí)間內(nèi)只觸發(fā)一次,例如滾輪事件(scroll)、鼠標(biāo)點(diǎn)擊事件(click)等等,這個(gè)時(shí)候我們就需要一個(gè)方法去控制他,一段時(shí)間(0.5S/1S)之內(nèi)只能觸發(fā)一次事件,即為節(jié)流
防抖(debounce)
// 防抖 export default function debounce(fn, time) { time = time || 200 // 定時(shí)器 let timer = null return function(...args) { var _this = this if (timer) { clearTimeout(timer) } timer = setTimeout(function() { timer = null fn.apply(_this, args) }, time) } }
節(jié)流(throttle)
// 節(jié)流 export default function throttle(fn, time) { let timer = null time = time || 1000 return function(...args) { if (timer) { return } const _this = this timer = setTimeout(() => { timer = null }, time) fn.apply(_this, args) } }
頁面使用
直接就用click的點(diǎn)擊速度模擬觸發(fā)事件的頻率了
<el-button @click="clickDebounce">防抖</el-button> <el-button @click="clickThrottle">節(jié)流</el-button>
//引用定義好的JS方法 import debounce from '@/utils/debounce' import throttle from '@/utils/throttle' methods: { clickDebounce: debounce((e) => { console.log(1) }, 1000), clickThrottle: throttle((e) => { console.log(2) }, 1000), }
使用場景
使用場景根據(jù)業(yè)務(wù)需求可以有很多很多 簡單舉兩個(gè)例子
防抖(debounce)搜索框自動(dòng)搜索的時(shí)候,可搜索下拉框遠(yuǎn)程搜索的時(shí)候,用戶在沒輸入完的情況下,防抖可以節(jié)約請(qǐng)求資源。
鼠標(biāo)移動(dòng)的時(shí)候,鼠標(biāo)停下來不動(dòng)再執(zhí)行方法
節(jié)流(throttle)滾動(dòng)頁面的時(shí)候
總結(jié)
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
Vue動(dòng)畫之第三方類庫實(shí)現(xiàn)動(dòng)畫方式
這篇文章主要介紹了Vue動(dòng)畫之第三方類庫實(shí)現(xiàn)動(dòng)畫方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04淺談Vue static 靜態(tài)資源路徑 和 style問題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue管理系統(tǒng)項(xiàng)目中的一些核心技能匯總
Vue是當(dāng)今增長最快的前端框架,Vue 平易近人、用途廣泛且性能卓越,它的語法非常直觀,并且具有友好的學(xué)習(xí)曲線,是開發(fā)人員最想學(xué)習(xí)的頂級(jí)前端庫之一,下面這篇文章主要給大家介紹了關(guān)于vue管理系統(tǒng)項(xiàng)目中的一些核心技能,需要的朋友可以參考下2022-05-05