前端-防止多次点击

前端-防止多次点击

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

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

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

// 防止处理多次点击
//封装函数
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,      
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.全局注册

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

1
2
3
4

3.使用

//调用 
@click="$noMultipleClicks(方法名)"
//设置noClick
noClick:true
1
2
3
4