用js实现或者once事件修饰符保证按钮只能点击一次（用于提交数据或操作数据库时）

今天在使用添加按钮添加记录突然添加了好几条记录，把我都看呆了。然后反应过来是因为网络卡顿导致服务器没有反应重复发送了请求。

疯狂提示添加成功~~~

 

今天我分享两种方法：

第一种使用once事件修饰符

使用@click.once实现button只能点击一次，适用于提交表单记录或者进行数据库的操作

1. once，只执行一次
2. 只有在第一次点击时会执行，再次点击不会起作用

 <el-button type="primary" @click.once="绑定的事件" >确定</el-button>

 第二种自定义一个方法

自定义方法可以写下一个js文件中实现复用。这是参考一位大佬的文章，但是觉得在具体使用上不够小白，于是我就用自己的例子来演示一下下。

 首先我选择在src下的components文件下建立一个clickThrottle.js文件

clickThrottle.js文件内容：

/* 防止重复点击 */
let clickTimer = 0

function clickThrottle(interval = 3000) {
    let now = +new Date(); // 获取当前时间的时间戳
    let timer = clickTimer; // 记录触发事件的事件戳
	
    if (now - timer < interval) {
    // 如果当前时间 - 触发事件时的事件 < interVal，那么不符合条件，直接return false，
    // 不让当前事件继续执行下去
        return false;
    } else { 
    // 反之，记录符合条件触发了事件的时间戳，并 return true，使事件继续往下执行
        clickTimer = now;
        return true;
    }
}

export default clickThrottle

 引入文件

import antiShake from '@/components/clickThrottle'

 

 使用：

 

好吧这波我称之为妈妈级教学，如果对你有帮助欢迎点赞评论收藏哟(o´ω`o)و

 效果图：

 

 参考文章地址：http://t.csdn.cn/9g1m3