小程序按钮避免多次调用接口和点击方案实现(不用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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
初探PHP5
2006/10/09 PHP
透析PHP的配置文件php.ini
2006/10/09 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
使用 PHP Masked Package 屏蔽敏感数据的实现方法
2019/10/15 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
python学习必备知识汇总
2017/09/08 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Django如何将URL映射到视图
2019/07/29 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
Python基于pandas绘制散点图矩阵代码实例
2020/06/04 Python
解决c++调用python中文乱码问题
2020/07/29 Python
个人找工作求职简历的自我评价
2013/10/20 职场文书
应届本科毕业生求职信
2014/07/23 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
政风行风评议工作总结
2014/10/21 职场文书
2014年话务员工作总结
2014/11/19 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
如何在Mac上通过docker配置PHP开发环境
2021/05/29 PHP
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis