比如页面有一个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.当页面发生跳转的时候不好用，我自己测试过。
方法二、通过设置遮罩层，当按钮被第一次点击的时候，弹出一个遮罩层遮挡按钮被再次点击，这种方法需要自己定义一个遮罩层，可通过一个data属性来控制是否显示，具体执行步骤和方法一类似。
方法三、不通过遮罩层和按钮disable属性，直接通过变量来控制是否执行事件，具体代码大致如下：
1、设置参数is_first_action为true
2、事件执行前设置is_first_action为false,然后执行事件时判断is_first_action是否为true,否则不执行
3、执行完初始化is_first_action为true
以上三种方法相同点都是通过data属性来判断是非是第一次执行，不同点在于界面展示，其中第一种可能只适合按钮，而第二种和第三种方法适合图片或者文字触发的事件。
宠物免费领养小程序，欢迎来踩
