How to avoid multiple clicks and repeat the event multiple times

As the front-end development, we often encounter the scene, such as the user clicks to get the verification code button, there is no reaction, most users will then click, which will cause the user to receive multiple verification code, because the background The API request is relatively slow, and the client experience is not in place, causing the user to think that it is not a click or page, and then click the button again in the last request. This is the development of us, this is bug.

How to solve or avoid this problem? There are two cases.

1, click event to execute network requests (submit comments, verification code, payment)

can display a mode before request execution The loading box, then turn off the load box after completion.


Due to the small program to support wx.showloading in the 1.1.0 version of the base, you need to be compatible with the low version, the code is as follows:

Function Showloading (Message) {if (wx.showloading) {// Basic Library 1.1.0 WeChat 6.5.6 Restaurant start support, low version needs to be compatible with WX.ShowLoading ({Title: Message, Mask: true}) } else {// low version uses toast compatibility processing and sets the time to 20 seconds to avoid disappearing wx.showtoast ({Title: Message, Icon: ‘load “, Mask: True, Duration: 20000});}} function Hideloading () {if (wx.hideloading) {// Basic Library 1.1.0 WeChat 6.5.6 Restaurant start support, low version needs to be compatible with wx.hideloading ();} else{wx.hidtoast ();}}
  We can place the code displayed and closed the load box in the public code, such as Util, and then directly Call.  
function request () {util.showloading (‘load …’); wx.Request ({URL: app.globaldata.host + ‘xxx’, Data: {…}, method: ‘get’, access: function (res) {util.hideloading () …}, fail: function (res) {util.hideloading ()}}}}

2, click event is page jump
   When the event is required to jump, it is not suitable. Display 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 click to open multiple pages. Here you can use the restriction button or the click interval of the control, and this method can also be put this method. In the public code, such as Util, then call it directly when used. 
Function ButtonClicked (Self) {Self.SetData ({ButtonClicked: true}) setTimeout (Function () {Self.SetData ({ButtonClicked: false})} )}

First need to correspond to the pageA ButtonClicked data object is added to the JS file 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 Can I use BUTTONCLICKED to clicked, I can use BINDTAP to use disabled
   

   The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud. 
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment