[VueJsDev] 基础知识 - Button的全局节流

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

Button的全局节流

::: details 目录

Button的全局节流

Step. 1: 注册函数
Step. 2: 局部节流函数失效处理
Code. 3: setVueClickGlobalThrottle.js 源码

:::

这是一个系统默认配置所有系统的按钮要防止连续点击的暴力测试

这不是防抖函数，防抖函数不适合这里，这是节流函数

Step. 1: 注册函数

将函数注入到 Vue 当中

// @/main.js
import setVueClickGlobalThrottle from "@/libs/common/setVueClickGlobalThrottle.js"
setVueClickGlobalThrottle(Vue) // 将所有click 进行节流处理

Step. 2: 局部节流函数失效处理

并不是所有按钮需要节流

<Button :notThrottle="true"> ↑ </Button>

Code. 3: setVueClickGlobalThrottle.js 源码

这里的节流时间为1000毫秒，具体可以自行修改

// @/libs/common/setVueClickGlobalThrottle.js
const setVueClickGlobalThrottle = Vue => {
  // 节流
  const on = Vue.prototype.$on
  Vue.prototype.$on = function (event, func) {
    // console.info('全局拦截 click $on事件 event', event)
    // console.info('节流 func', func)
    let previous = 0
    let newFunc = func
    if (event === "click") {
      // console.info('全局拦截 click 事件 setVueClickGlobalThrottle')
      newFunc = function () {
        const now = new Date().getTime()
        if (this.$attrs.notThrottle || previous + 1000 <= now) {
          console.info("this, arguments", this, arguments)
          func.apply(this, arguments)
          previous = now
        }
      }
    }
    on.call(this, event, newFunc)
  }
}

export default setVueClickGlobalThrottle

---------------------------------------------
生活的意义并不是与他人争高下，而在于享受努力实现目标的过程，结果是对自己行动的嘉奖。
↑面的话，越看越不痛快，应该这么说：

生活的意义就是你自己知道你要做什么，明确目标。没有目标，后面都是瞎扯！

新博客 https://www.VuejsDev.com 用于梳理知识点

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

标签: vue