Mini programa para evitar múltiples clics que desencadenan eventos

Cuando un usuario hace clic en un botón o control, si la respuesta es lenta, a menudo hará clic repetidamente. Además, puede haber casos en los que el usuario haga clic repetidamente deliberadamente rápidamente. En este caso, el evento de clic se activará varias veces, causando resultados inesperados. ¿Cómo resolver o evitar este problema? Generalmente hay dos situaciones. 1. El evento click es la solicitud de ejecución. En este caso, se puede mostrar un cuadro de carga de modo antes de que se ejecute la solicitud. Una vez completada la solicitud, se cierra el cuadro de carga. Dado que el applet admite wx.showLoading en la versión 1.1.0 de la biblioteca básica, debe Compatible con la versión inferior, el código es el siguiente:

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

Podemos poner el código que muestra el cuadro de carga y cerrar el cuadro de carga en un código común como util, y luego llamarlo directamente cuando se usa.

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. El evento de clic es un salto de página. Cuando el evento de clic es un salto de página, no es adecuado para mostrar el cuadro de carga, pero el salto de página del applet no es muy rápido. Si no se procesa, hará que el usuario haga clic repetidamente para abrir varias páginas. Aquí puede usar el método para limitar el intervalo de clic de botones o controles. También puede poner este método en un código público como util, y luego llamarlo directamente cuando lo use.

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

Primero, debe agregar un objeto de datos buttonClicked en el archivo js correspondiente a la página, y luego llamar al método anterior en el evento click.

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

Además, en el control de clic de wxml, use buttonClicked para determinar si se puede hacer clic en él. Puede usar bindtap o deshabilitado

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

A veces, el método anterior no funcionará si hace clic demasiado rápido y aún iniciará dos solicitudes o abrirá varias páginas idénticas.
Lo siguiente proporciona un enfoque más científico:
1. Definir 3 atributos en los datos.

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

2. La página activa estos 3 eventos.

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

3. Agregar 3 métodos a los métodos

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

Enlace original: https://blog.csdn.net/qappleh/article/details/84033766