Vue中使用防抖與節(jié)流的方法
何為防抖/節(jié)流
首先先說說何為防抖與節(jié)流
防抖(debounce
)
防抖就是一段時間內會多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們在不觸發(fā)的多久以后再執(zhí)行該事件,例如鼠標移動事件(mousemove)、輸入框變更事件(change)等等,這個時候我們就需要一個方法去控制他,一段時間內沒執(zhí)行該事件后,執(zhí)行該事件,即為防抖
節(jié)流(throttle
)
節(jié)流就是短時間內會多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們既定時間內只觸發(fā)一次,例如滾輪事件(scroll)、鼠標點擊事件(click)等等,這個時候我們就需要一個方法去控制他,一段時間(0.5S/1S)之內只能觸發(fā)一次事件,即為節(jié)流
防抖(debounce)
// 防抖 export default function debounce(fn, time) { time = time || 200 // 定時器 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的點擊速度模擬觸發(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è)務需求可以有很多很多 簡單舉兩個例子
防抖(debounce)搜索框自動搜索的時候,可搜索下拉框遠程搜索的時候,用戶在沒輸入完的情況下,防抖可以節(jié)約請求資源。
鼠標移動的時候,鼠標停下來不動再執(zhí)行方法
節(jié)流(throttle)滾動頁面的時候
總結
本篇文章就到這里了,希望能夠給你帶來幫助,也希望您能夠多多關注腳本之家的更多內容!
相關文章
淺談Vue static 靜態(tài)資源路徑 和 style問題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11