前端-防止多次点击

前端-防止多次点击

原理:设置一个状态变量,为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
相关推荐
PuddingSama2 分钟前
Android 高级绘制技巧: BlendMode
android·前端·面试
Cache技术分享5 分钟前
186. Java 模式匹配 - Java 21 新特性:Record Pattern(记录模式匹配)
前端·javascript·后端
卸任13 分钟前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
叫我詹躲躲17 分钟前
前端竟能做出这种专业医疗工具?DICOM Viewer 医学影像查看器
前端·javascript·vue.js
ze_juejin18 分钟前
为什么说vue比Angular轻巧
前端
子兮曰18 分钟前
🚀彻底掌握异步编程:async/await + Generator 深度解析与20个实战案例
前端·javascript·typescript
六月的可乐19 分钟前
Vue3项目中集成AI对话功能的实战经验分享
前端·人工智能·openai
PineappleCoder20 分钟前
面试官你好,请您听我“编解”!!!
前端·算法·面试
ze_juejin20 分钟前
vue的选项式API和组合式API
前端
AAA_Tj21 分钟前
CSS查漏补缺-BFC全面深入掌握
前端