Vue的click事件防抖和節(jié)流處理詳解
更新時(shí)間：2019年11月13日 09:25:14 作者：人稱～
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
函數(shù)防抖
定義：多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時(shí)執(zhí)行。
在vue中對(duì)click添加防抖處理
const on = Vue.prototype.$on
// 防抖處理
Vue.prototype.$on = function (event, func) {
let timer
let newFunc = func
if (event === 'click') {
newFunc = function () {
clearTimeout(timer)
timer = setTimeout(function () {
func.apply(this, arguments)
}, 500)
}
}
on.call(this, event, newFunc)
}
函數(shù)節(jié)流
定義：觸發(fā)函數(shù)事件后，短時(shí)間間隔內(nèi)無(wú)法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過(guò)了規(guī)定的時(shí)間間隔，才能進(jìn)行下一次的函數(shù)調(diào)用。
在vue中對(duì)click添加節(jié)流處理
const on = Vue.prototype.$on
// 節(jié)流
Vue.prototype.$on = function (event, func) {
let previous = 0
let newFunc = func
if (event === 'click') {
newFunc = function () {
const now = new Date().getTime()
if (previous + 1000 <= now) {
func.apply(this, arguments)
previous = now
}
}
}
on.call(this, event, newFunc)
}
以上這篇Vue的click事件防抖和節(jié)流處理詳解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了vue3使用echart的兩種引入方式以及注意事項(xiàng)說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue+ElementUI前端添加展開(kāi)收起搜索框按鈕完整示例
最近一直在用element ui做后臺(tái)項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUI前端添加展開(kāi)收起搜索框按鈕的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問(wèn)題的解決方法
這篇文章主要介紹了vue項(xiàng)目中做編輯功能傳遞數(shù)據(jù)時(shí)遇到問(wèn)題的解決方法，vue父組件向子組件傳遞數(shù)據(jù)的問(wèn)題，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選功能
這篇文章主要介紹了vue使用vue-router beforEach實(shí)現(xiàn)判斷用戶登錄跳轉(zhuǎn)路由篩選,本篇文章默認(rèn)您已經(jīng)會(huì)使用 webpack 或者 vue-cli 來(lái)進(jìn)行環(huán)境的搭建，并且具有一定的vue基礎(chǔ)。需要的朋友可以參考下2018-06-06
本篇文章主要介紹了詳解vue+css3做交互特效的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Vue實(shí)現(xiàn)滾動(dòng)加載更多效果的示例代碼
這篇文章介紹了在?Web?應(yīng)用中處理大量數(shù)據(jù)展示的兩種滾動(dòng)加載更多方案,滾動(dòng)加載更多通過(guò)分頁(yè)工作,優(yōu)點(diǎn)是實(shí)現(xiàn)簡(jiǎn)單、用戶體驗(yàn)流暢,缺點(diǎn)是內(nèi)存占用可能過(guò)高,虛擬列表只渲染視口內(nèi)容,性能好但實(shí)現(xiàn)復(fù)雜,本文介紹了Vue實(shí)現(xiàn)滾動(dòng)加載更多效果,需要的朋友可以參考下2024-12-12
這篇文章主要為大家詳細(xì)介紹了如何利用Vue實(shí)現(xiàn)文件批量打包壓縮下載功能，文中的實(shí)現(xiàn)步驟講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2022-07-07
這篇文章主要介紹了Vue使用鼠標(biāo)在Canvas上繪制矩形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
vue路由切換時(shí)取消之前的所有請(qǐng)求操作
這篇文章主要介紹了vue路由切換時(shí)取消之前的所有請(qǐng)求操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
本篇文章主要介紹了淺談vuepress 踩坑記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04