手动封装on事件在Vue中的作用防重复点击

头发超多的程序媛

于 2021-08-17 11:29:14 发布

阅读量172

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44714325/article/details/119752834

版权

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一段Vue.js代码，用于实现防止用户在短时间内重复点击的功能。通过设置时间间隔，确保上一次点击后的一秒内不会触发新的点击事件，从而避免多次请求或操作。该代码片段主要应用于前端开发中的用户体验优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下代码实现的是“防重复点击”效果
main.js中设置：

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)
}