Vue的click事件防抖和節(jié)流處理詳解
更新時間：2019年11月13日 09:25:14 作者：人稱～
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
函數(shù)防抖
定義：多次觸發(fā)事件后，事件處理函數(shù)只執(zhí)行一次，并且是在觸發(fā)操作結(jié)束時執(zhí)行。
在vue中對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ù)事件后，短時間間隔內(nèi)無法連續(xù)調(diào)用，只有上一次函數(shù)執(zhí)行后，過了規(guī)定的時間間隔，才能進(jìn)行下一次的函數(shù)調(diào)用。
在vue中對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é)流處理詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何使用 Slot 分發(fā)內(nèi)容實例詳解
本篇文章主要介紹了vue如何使用 Slot 分發(fā)內(nèi)容實例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue項目中使用postcss-px2rem的方法總結(jié),在項目中為了屏幕適配，經(jīng)常會用到rem，postcss-px2rem就是為了讓我們直接在將代碼中px自動轉(zhuǎn)化成對應(yīng)的rem的一個插件，需要的朋友可以參考下2022-05-05
在本文中,我們詳細(xì)講解了Vue路由的使用方法,我們首先安裝了Vue?Router,然后創(chuàng)建了一個Vue?Router實例,并配置了路由,感興趣的朋友一起看看吧2023-11-11
VueJs路由跳轉(zhuǎn)——vue-router的使用詳解
本篇文章主要介紹了VueJs路由跳轉(zhuǎn)——vue-router的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
Element-ui?Layout布局(Row和Col組件)的實現(xiàn)
我們在實際開發(fā)中遇到一些布局的時候會用到Layout布局，本文就詳細(xì)的介紹了Element-ui?Layout布局(Row和Col組件)的實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2021-12-12
這篇文章主要介紹了如何利用vite快速搭建vue3項目問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue.js中引入圖片路徑的幾種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
vue-cli+webpack在生成的項目中使用bootstrap實例代碼
本篇文章主要介紹了vue-cli+webpack在生成的項目中使用bootstrap實例代碼，具有一定的參考價值，有興趣的可以了解一下2017-05-05
Vue3?響應(yīng)式系統(tǒng)實現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實現(xiàn)?computed，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下2022-06-06
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習(xí)慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09