Mini Program to avoid multiple clicks repeatedly triggering events

When a user clicks a button or control, if the response is slow, the user will often click repeatedly. In addition, there may be cases where the user deliberately repeatedly clicks quickly. In this case, the click event will be triggered multiple times, causing unexpected results. How to solve or avoid this problem? There are generally two situations. 1. The click event is the execution request. In this case, a mode loading box can be displayed before the request is executed. After the request is completed, the loading box is closed. Since the applet supports wx.showLoading in the 1.1.0 version of the basic library, you need to Compatible with the lower version, the code is as follows:

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();
  }
}

We can put the code that displays the load box and close the load box in a common code such as util, and then directly call it when it is used.

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. The click event is a page jump. When the click event is a page jump, it is not suitable for displaying the loading box, but the page jump of the applet is not very fast. If it is not processed, it will cause the user to repeatedly click to open multiple pages. Here you can use the method of limiting the click interval of buttons or controls. You can also put this method into public code such as util, and then directly call it when you use it.

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

First, you need to add a buttonClicked data object in the js file corresponding to the page, and then call the above method in the click event.

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

In addition, in the click control of wxml, use buttonClicked to determine whether it can be clicked. You can use bindtap or disabled

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

Sometimes the above method will not work if you click too fast, and you will still initiate two requests or open multiple identical pages.
The following provides a more scientific approach:
1. Define 3 attributes in data

touchStartTime: 0, // 触摸开始时间
touchEndTime: 0, // 触摸结束时间
lastTapTime: 0 // 最后一次单击事件点击发生时间

2. The page triggers these 3 events

<view @tap="doubleTap" @touchstart="touchStart" @touchend="touchEnd">测试重复点击事件</view>

3. Add 3 methods to the methods

// 防止重复点击
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 点击事件具体执行那个业务
    }
  }
}

Original link: https://blog.csdn.net/qappleh/article/details/84033766