前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次

实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次

作者头像
青年码农
发布2022-08-19 11:02:54
2.6K0
发布2022-08-19 11:02:54
举报
文章被收录于专栏:青年码农青年码农

点击上方“青年码农”关注

回复“源码”可获取各种资料

使用 Vue 框架开发项目中,遇到个问题,就是在用户提交数据时,如果连续多次点击按钮,会触发多次,导致数据异常,因此需要限制用户短时间内多次点击同一按钮,只触发一次。

1. 自定义指令

利用元素的 disabled 属性,新建自定义指令,preventClick.js

代码语言:javascript
复制
export default {
  install(Vue) {
    Vue.directive('preventClick', {
      inserted(button, bind) {
        button.addEventListener('click', () => {
          if (!button.disabled) {
            button.disabled = true;
            setTimeout(() => {
              but.disabled = false
            }, )
          }
        })
      }
    })
  }
}

在 main.js 中引入

组件中使用

2. 防抖函数

函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,直到函数请求停止并超过时间间隔才会执行。

代码语言:javascript
复制
export function debounce(fn, delay = ) {
 // 记录上一次的延时器
 var timer = null;
 return function() {
  var args = arguments;
  var that = this;
  // 清除上一次延时器
  clearTimeout(timer)
  timer = setTimeout(function() {
    fn.apply(that,args)
  }, delay);
 }
}

导入到组件中使用

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2022-08-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 青年码农 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档