干掉微信小程序-避免多次点击，重复触发事件

问题描述

开发小程序时，或者说是在做前端的时候，我们经常会遇到当用户点击某个按钮时，没有得到反馈的话，大部分用户都会接着点击，这就会造成前端接收到多次请求的响应。

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