前端-防止多次点击

前端-防止多次点击

原理:设置一个状态变量,为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
相关推荐
SteveJrong7 分钟前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~13 分钟前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发37 分钟前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii1 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack1 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好1 小时前
react中props的使用
前端·react.js·前端框架
一个处女座的程序猿O(∩_∩)O2 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
一点一木2 小时前
火山方舟 Responses API 实战指南:从概念到「公司尽调 Dossier 生成器」
前端·人工智能·api
还是大剑师兰特2 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
用户47949283569152 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试