读前说明

本篇文章记录了如何在vue项目中使用节流优化，主要是用于项目优化，减少请求次数 直接上干货

创建一个clickThrottle.js文件

veu中全局点击事件节流实现

详细代码如下

import Vue from 'vue'
const on = Vue.prototype.$on
​
// 节流
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

由于vue中的事件都经过$on方法

监听该方法，添加节流

在项目入口文件中引入即可

//引入点击节流
import '@/utils/clickThrottle'

总结

主要是利用vue上的$on,对其中的事件处理进行节流的处理，在全局引入即可