当前位置: 首页 > Web前端 > HTML

如何防止用户重复点击

时间:2023-04-02 13:30:30 HTML

?大多数场景可能是这样的。当用户点击某个按钮时,界面上会出现“Loading...”的Loading界面,然后向后台发送一个请求。后台返回成功后,直接进入下一个业务逻辑。在后台出现故障或者网络异常的情况下,会显示一个“系统错误”的Toast,一开始的加载界面也会消失。我们给出一个常见的wx.request的示例代码,如下所示。代码清单4-11wx.request常用示例代码varhasClick=false;Page({tap:function(){if(hasClick){return}hasClick=truewx.showLoading()wx.request({url:'https://test.com/getinfo',方法:'POST',header:{'content-type':'application/json'},data:{},success:function(res){if(res.statusCode===200){console.log(res.data)//服务器响应包内容}},fail:function(res){wx.showToast({title:'系统错误'})},complete:function(res){wx.hideLoading()hasClick=false}})}})为了防止用户很快触发两次tap回调,我们还加了一个hasClick“锁”,在开始请求之前检查请求是否已经发起。如果不是,则发起本次请求,请求返回后恢复锁的状态。