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