小程序如何避免多次点击，重复触发事件

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

如何解决或避免这个问题呢？

很简单，点击事件是执行网络请求（提交评论，请求接口，支付等）

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

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

在这里可以集成一个util.js

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();
  }
 }
 
module.exports = {
  showLoading,
  hideLoading
}

在使用时直接调用即可。

 util.showLoading('提示...');
 wx.request({
  url:'xxx',
  data: {...},
  method: 'POST',
  success: function (res) {
   util.hideLoading()
   ...
  },
  fail: function (res) {
   util.hideLoading()
   ...
  }
 })

以上就是本文的全部内容，希望对大家的需求有所帮助