前端-防止多次点击

前端-防止多次点击

原理:设置一个状态变量,为true的时候才能触发,false不能触发,运用setTimeout延时修改状态变量状态,达到不能连点的效果。

注释: 这里封装了一个js文件 全局注册 用的时候比较方便

1.封装的JS文件:common.js

javascript 复制代码
// 防止处理多次点击
//封装函数
function noMultipleClicks(methods, info) {
    let that = this;
    //noClick决定是否能够点击
    if (that.noClick) {
       //进入后修改noclick为false
        that.noClick= false;
        //触发传入的方法-完成第一次点击
        if((info && info !== '') || info ==0) {
            methods(info);
        } else {
            methods();
        }
        //通过setTimeout延时将noClick变为true才能进行下次点击的触发
        setTimeout(()=> {
            that.noClick= true;
        }, 5000)
    } else {
		
    }
}
//导出
export default {
    noMultipleClicks,      
}

2.全局注册

javascript 复制代码
//防止多次点击
import common from '@/common/common.js'
Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

3.使用

javascript 复制代码
//调用 
@click="$noMultipleClicks(方法名)"
//设置noClick
noClick:true
相关推荐
IT_陈寒3 分钟前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
云飞云共享云桌面8 分钟前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
艾小码15 分钟前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&1 小时前
css word-spacing属性
前端·css
千叶寻-1 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年6 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_9 小时前
HTML5(前端基础)
前端·html·html5
Jagger_9 小时前
敏捷开发流程-精简版
前端·后端
FIN66689 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing9 小时前
ByteDance——jy真题
前端·javascript·面试