小程序避免多次點擊重複觸發事件

當用戶點擊按鈕或控件時，如果響應比較慢，往往會重複點擊，另外也會存在用戶故意反覆快速點擊的情況，這種時候就會多次觸發點擊事件造成非期望的結果。如何解決或避免這個問題呢？一般來說有兩種情況。 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();
  }
}

我們可以將顯示加載框和關閉加載框的代碼放在公共的代碼裏面比如util，然後在使用時直接調用即可。

function request() {
  util.showLoading('加載中...');
  wx.request({
    url: app.globalData.host + 'xxx',
    data: {...},
    method: 'GET',
    success: function (res) {
      util.hideLoading()
      ...
    },
    fail: function (res) {
      util.hideLoading()
      ...
    }
  })
}

2、點擊事件是頁面跳轉 當點擊事件是頁面跳轉時，不太適合顯示加載框，但小程序的頁面跳轉並不是很快，如果不作處理又會導致用戶反覆點擊打開多個頁面，這裏可以使用限制按鈕或控件的點擊間隔的方式處理，同樣可以將這個方法放到公共的代碼裏面比如util，然後在使用時直接調用即可。

function buttonClicked(self) {
  self.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    self.setData({
      buttonClicked: false
    })
  }, 500)
}

首先需要在頁面對應的js文件裏面增加一個buttonClicked數據對象，然後在點擊事件裏面調用上述方法。

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})

另外，在wxml的點擊控件中通過buttonClicked判斷是否可以點擊，可以用bindtap也可以用disabled

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

有時候點擊太快的話以上方法在真機賞並不起作用，還是會發起兩次請求或者打開多個相同的頁面。
下面提供更科學的辦法：
1、data裏面定義3個屬性

touchStartTime: 0, // 觸摸開始時間
touchEndTime: 0, // 觸摸結束時間
lastTapTime: 0 // 最後一次單擊事件點擊發生時間

2、頁面觸發這3個事件

<view @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd">測試重複點擊事件</view>

3、methods裏面添加3個方法

// 防止重複點擊
touchStart(e) {
  this.touchStartTime = e.timeStamp;
},
touchEnd(e) {
  this.touchEndTime = e.timeStamp;
},
doubleTap(item, e) {
  var vm = this;
  // 控制點擊事件在350ms內觸發，加這層判斷是爲了防止長按時會觸發點擊事件
  if (vm.touchEndTime - vm.touchStartTime < 350) {
    // 當前點擊的時間
    var currentTime = e.timeStamp;
    var lastTapTime = vm.lastTapTime;
    // 更新最後一次點擊時間
    vm.lastTapTime = currentTime;
    // 如果兩次點擊時間在300毫秒內，則認爲是雙擊事件
    if (currentTime - lastTapTime > 300) {
      // do something 點擊事件具體執行那個業務
    }
  }
}

原文鏈接：https://blog.csdn.net/qappleh/article/details/84033766