Vue中使用防抖與節(jié)流的方法
何為防抖/節(jié)流
首先先說說何為防抖與節(jié)流
防抖(debounce)
防抖就是一段時(shí)間內(nèi)會(huì)多次觸發(fā)相同的事件,而我們的目的卻只是想讓他們?cè)诓挥|發(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)
}
}
頁(yè)面使用
直接就用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),
}
使用場(chǎng)景
使用場(chǎng)景根據(jù)業(yè)務(wù)需求可以有很多很多 簡(jiǎn)單舉兩個(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)頁(yè)面的時(shí)候
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了vue 計(jì)時(shí)器組件的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法
下面小編就為大家分享一篇vue.js2.0點(diǎn)擊獲取自己的屬性和jquery方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
Vue項(xiàng)目全局配置頁(yè)面緩存之按需讀取緩存的實(shí)現(xiàn)詳解
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目全局配置頁(yè)面緩存之實(shí)現(xiàn)按需讀取緩存的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起看看吧2018-08-08
vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別
這篇文章主要介紹了vue2.x版本中computed和watch的使用及關(guān)聯(lián)和區(qū)別，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，需要的小伙伴可以參考一下2022-07-07
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問問題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點(diǎn)解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
本文分步驟給大家介紹了vue中引入mxGraph的方法，非常不錯(cuò)，給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
使用vscode格式化文檔無效的解決辦法(vue代碼格式化文檔無效)
這篇文章主要給大家介紹了關(guān)于使用vscode格式化文檔無效的解決辦法,也就是vue代碼格式化文檔無效,這是最近突然遇到的一個(gè)問題,這里給大家介紹一下解決的辦法,需要的朋友可以參考下2023-08-08
Vue如何循環(huán)提取對(duì)象數(shù)組中的值
這篇文章主要介紹了Vue如何循環(huán)提取對(duì)象數(shù)組中的值,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
本篇文章主要介紹了vue小圖標(biāo)favicon不顯示的解決方案，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
結(jié)合el-upload組件實(shí)現(xiàn)大文件分片上傳功能
Element UI的el-upload上傳組件相信各位小伙伴都已經(jīng)非常熟悉，最近接了一個(gè)新需求，要求在el-upload組件基礎(chǔ)上實(shí)現(xiàn)分片上傳功能，即小于等于5M文件正常上傳，大于5M文件切成5M每片上傳,那么這個(gè)功能怎么實(shí)現(xiàn)呢?一起看看吧2022-09-09