前端-防止多次点击

前端-防止多次点击

原理:设置一个状态变量,为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
相关推荐
mCell6 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip6 小时前
Node.js 子进程:child_process
前端·javascript
excel9 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel10 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼11 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙12 小时前
[译] Composition in CSS
前端·css
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix12 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript