Detailed explanation of how applets can avoid multiple clicks and repeatedly trigger events

As a front-end development, we often encounter scenarios, such as when the user clicks the get verification code button, there is no response, and most users will continue to click, which will cause the user to receive multiple verification codes. This is because the background API request is slow and the client experience is not done properly, which causes the user to think that it has not been clicked or the page is faked. Before the last request was processed, he clicked the button again. This is a bug for our development.

How to solve or avoid this problem? Generally speaking, there are two situations.

1. Click event is to execute a network request (submit comments, verification codes, payments)

In this case, a mode load box can be displayed before the request is executed, and the load box can be closed after the request is completed.

Since the applet only supports the basic library of version 1.1.0, it is necessary to perform compatibility with the lower version. The code is as follows:

 function showLoading(message) {
 if () {
  // Basic library 1.1.0 WeChat version 6.5.6 starts to support it, and the lower version needs to be compatible  ({
   title: message,
   mask: true
  });
 } else {
  // The lower version adopts Toast compatible processing and sets the time to 20 seconds to avoid automatically disappearing  ({
   title: message,
   icon: 'loading',
   mask: true,
   duration: 20000
  });
 }
}
 
function hideLoading() {
 if () {
  // Basic library 1.1.0 WeChat version 6.5.6 starts to support it, and the lower version needs to be compatible  ();
 } else {
  ();
 }
}

We can place the code that displays the load box and closes the load box in a public code such as util, and then call it directly when using it.

function request() {
 ('loading...');
 ({
  url:  + 'xxx',
  data: {...},
  method: 'GET',
  success: function (res) {
   ()
   ...
  },
  fail: function (res) {
   ()
   ...
  }
 })
}

2. Click event is a page jump

When the click event requires a page to jump, it is not suitable for displaying the load box, but the page redirection of the mini program is not very fast. If it is not processed, it will cause the user to click repeatedly to open multiple pages. Here you can use the method of limiting the click interval of the button or control. You can also put this method in a public code such as util, and then call it directly when using it.

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

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

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

In addition, in the wxml click control, you can use bindtap or disabled to determine whether you can click.

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

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.