微信小程序 防连点时间_微信小程序如何避免按钮多次点击重复触发事件

​比如页面有一个form表单，快速重复点击两次提交按钮，你会发现提交了数据两次，这种现象在正常情况下不会发生，只有当网络非常不好或者手机设备实在太差的时候才会发生。当作为一个严谨完美的应用，这种情况是不应该发生，那么如何避免按钮多次点击重复触发事件呢？方维网络参考微信小程序开发文档以及网络搜索找到了如下几个方法：

方法一、解决问题主要思路是当按钮被第一次点击时，设置按钮disabled属性为true，从而避免被再次点击。方法解决步骤如下：

1、增加页面data参数disabled，这个参数名可自己随意定义，设置初始值为false;

2、页面绑定按钮disabled属性，具体代码片段发布;

3、当事件执行开始时，加入代码 this.setData({disabled:true})，就是设置按钮为不可用；

4、事件执行完毕，重新初始化按钮disabled属性，有两种情况： 如果事件执行完页面发生跳转如navigateTo 当返回的时候，你会发觉按钮不可用，这时候

需要在onShow事件加入代码

onShow:function() {

this.setData({disabled:false})

}

如果页面不需要跳转，直接在事件执行完毕的时候加入this.setData({disabled:false})

这时候你会问，为什么不都在事件执行完毕时候设置disabled为false.当页面发生跳转的时候不好用，我自己测试过。

方法二、通过设置遮罩层，当按钮被第一次点击的时候，弹出一个遮罩层遮挡按钮被再次点