首页 >> js开发 >> js小程序按钮避免多次调用接口和点击方案实现(不用showLoading)js大全
js小程序按钮避免多次调用接口和点击方案实现(不用showLoading)js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
本来是用showLoading的,点击直接转菊花,但是呢,showLoading和 showToast这个方法是冲突的,你转了菊花不能弹toast提示,在某个页面需要提交一次表单和做输入验证,测试说可以点击多次然后想到可以用一个变量判断是否点击了,然后500毫秒后自动回来写在公共的utils方法里面
// 防止多次点击
function btnClickedFun(self) {
self.setData({
btnClicked: true
})
setTimeout(() => {
self.setData({
btnClicked: false
})
})
}
// 防止多次点击
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()
开始调接口
},
})
Page({
data: {
btnClicked: false
},
click: function (e) {
utils.btnClickedFun(this);
// 各种处理代码
if (!form[json.departmentId]) {
utils.showToast('请选择所属部门')
return
}
...
// 各种处理代码
utils.showLoading()
开始调接口
},
})
html代码
// 防止多次点击
function btnClickedFun(self) {
self.setData({
btnClicked: true
})
setTimeout(() => {
self.setData({
btnClicked: false
})
})
}
// 防止多次点击
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()
开始调接口
},
})
Page({
data: {
btnClicked: false
},
click: function (e) {
utils.btnClickedFun(this);
// 各种处理代码
if (!form[json.departmentId]) {
utils.showToast('请选择所属部门')
return
}
...
// 各种处理代码
utils.showLoading()
开始调接口
},
})
html代码
相关文章:
- js微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现js大全
- js解决echarts中横坐标值显示不全(自动隐藏)问题js大全
- js详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)js大全
- js解决Vue中的生命周期beforeDestory不触发的问题js大全
- jsvue中解决拖拽改变存在iframe的div大小时卡顿问题js大全
- jsvue中destroyed方法的使用说明js大全
- js在vue中created、mounted等方法使用小结js大全
- jseslint+prettier统一代码风格的实现方法js大全
- js解决Vue router-link绑定事件不生效的问题js大全
- jsvue 清空input标签 中file的值操作js大全