详解小程序如何避免多次点击，重复触发事件-创新互联

作为前端开发，我们经常会遇到的场景，比如用户点击获取验证码按钮时，没有反应，大部分用户都会接着点击，这就会造成用户收到多条验证码，这是因为后台api请求比较慢，而客户端体验又做得不到位，导致用户以为没点击到或者是页面假死，在上次请求还没处理完，就再次点击按钮。这对于我们开发来说，这是bug。

如何解决或避免这个问题呢？一般来说有两种情况。

1、点击事件是执行网络请求（提交评论，验证码，支付）

这种情况下可以在请求执行之前显示一个模式的加载框，请求完成后再关闭加载框。

由于小程序在1.1.0版本基础库才支持wx.showLoading，因此需要对低版本做兼容处理，代码如下：

 function showLoading(message) {
 if (wx.showLoading) {
  // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
  wx.showLoading({
   title: message,
   mask: true
  });
 } else {
  // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
  wx.showToast({
   title: message,
   icon: 'loading',
   mask: true,
   duration: 20000
  });
 }
}
 
function hideLoading() {
 if (wx.hideLoading) {
  // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
  wx.hideLoading();
 } else {
  wx.hideToast();
 }
}