小程序按钮避免多次调用接口和点击方案实现(不用showLoading)


Posted in Javascript onApril 15, 2020

本来是用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}}" />

到此这篇关于小程序按钮避免多次调用接口和点击方案实现(不用showLoading)的文章就介绍到这了,更多相关小程序按钮避免多次点击内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
JavaScript事件列表解说
Dec 22 Javascript
IE8 原生JSON支持
Apr 13 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
浅谈javascript的Array.prototype.slice.call
Aug 31 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
微信小程序 获取二维码实例详解
Jun 23 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
vue使用element-ui的el-input监听不了回车事件的解决方法
Jan 12 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
用VsCode编辑TypeScript的实现方法
May 07 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 #Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 #Javascript
写给新手同学的vuex快速上手指北小结
Apr 14 #Javascript
vue-cli设置publicPath小记
Apr 14 #Javascript
vue 实现用户登录方式的切换功能
Apr 14 #Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 #Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
Apr 14 #Javascript
You might like
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
window.open不被拦截的实现代码
2012/08/22 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
JavaScript中交换值的10种方法总结
2020/08/18 Javascript
在Django的通用视图中处理Context的方法
2015/07/21 Python
浅谈python中列表、字符串、字典的常用操作
2017/09/19 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
Python开发之身份证验证库id_validator验证身份证号合法性及根据身份证号返回住址年龄等信息
2020/03/20 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
使用索引有什么好处
2016/07/27 面试题
软件设计的目标是什么
2016/12/04 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
宿舍违规检讨书
2014/01/12 职场文书
大学军训感言300字
2014/03/09 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
工地宣传标语
2014/06/18 职场文书
财务人员岗位职责
2015/02/03 职场文书
班主任寄语2015
2015/02/26 职场文书
创业计划书之酒店
2019/08/30 职场文书