小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
时间：2021-03-02 11:48:07|栏目：JavaScript代码|点击： 次
本来是用showLoading的，点击直接转菊花，但是呢，showLoading和 showToast这个方法是冲突的，你转了菊花不能弹toast提示，在某个页面需要提交一次表单和做输入验证，测试说可以点击多次
然后想到可以用一个变量判断是否点击了，然后500毫秒后自动回来
写在公共的utils方法里面
// 防止多次点击
function btnClickedFun(self) {
self.setData({
btnClicked: true
})
setTimeout(() => {
self.setData({
btnClicked: false
})
})
}
js 代码
Page({
data: {
btnClicked: false
},
click: function (e) {
utils.btnClickedFun(this);
// 各种处理代码
if (!form[json.departmentId]) {
utils.showToast('请选择所属部门')
return
}
...
// 各种处理代码
utils.showLoading()
开始调接口
},
})
html代码
<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />
上一篇：深入理解ES6的迭代器与生成器
栏 目：JavaScript代码
本文标题：小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
本文地址：http://www.codeinn.net/misctech/73013.html
