干掉微信小程序-避免多次點擊，重復觸發事件

干掉微信小程序-避免多次點擊，重復觸發事件

問題描述

開發小程序時，或者說是在做前端的時候，我們經常會遇到當用戶點擊某個按鈕時，沒有得到反饋的話，大部分用戶都會接着點擊，這就會造成前端接收到多次請求的響應。

這主要是因為后端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" />