干掉微信小程序-避免多次点击，重复触发事件

干掉微信小程序-避免多次点击，重复触发事件

问题描述

开发小程序时，或者说是在做前端的时候，我们经常会遇到当用户点击某个按钮时，没有得到反馈的话，大部分用户都会接着点击，这就会造成前端接收到多次请求的响应。

这主要是因为后端api请求需要时间，导致用户以为没点击到或者是页面假死，在上次请求还没处理完，就再次点击按钮。

所以，接下来说说，在微信小程序中避免多次点击，重复触发事件的两种思路。

解决方法一：

使用 wx.showLoading 在请求执行之前显示一个加载框，请求完成后再关闭加载框。

js代码

 showLoading:function(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
    });
  }
}
 
hideLoading:function() {
  if (wx.hideLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持，低版本需做兼容处理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

解决方法二：

使用限制按钮或控件的点击时间间隔的方式处理。

js代码

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    this.buttonClicked(this);
  },
})
...  ...
buttonClicked:function (_this) {
  _this.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    _this.setData({
      buttonClicked: false
    })
  }, 500)
}

wxml代码

<view bindtap="{{!buttonClicked?'click':''}}"" />
<button bindtap="{{!buttonClicked?'click':''}}" />
<button bindtap="click" disabled="buttonClicked" />