详解小程序如何避免多次点击,重复触发事件


Posted in Javascript onApril 08, 2019

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。这对于我们开发来说,这是bug。

如何解决或避免这个问题呢?一般来说有两种情况。

1、点击事件是执行网络请求(提交评论,验证码,支付)

这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框。

由于小程序在1.1.0版本基础库才支持wx.showLoading,因此需要对低版本做兼容处理,代码如下:

function showLoading(message) {
 if (wx.showLoading) {
  // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
  wx.showLoading({
   title: message,
   mask: true
  });
 } else {
  // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
  wx.showToast({
   title: message,
   icon: 'loading',
   mask: true,
   duration: 20000
  });
 }
}
 
function hideLoading() {
 if (wx.hideLoading) {
  // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
  wx.hideLoading();
 } else {
  wx.hideToast();
 }
}

我们可以将显示加载框和关闭加载框的代码放在公共的代码里面比如util,然后在使用时直接调用即可。

function request() {
 util.showLoading('加载中...');
 wx.request({
  url: app.globalData.host + 'xxx',
  data: {...},
  method: 'GET',
  success: function (res) {
   util.hideLoading()
   ...
  },
  fail: function (res) {
   util.hideLoading()
   ...
  }
 })
}

2、点击事件是页面跳转

当点击事件需要页面跳转时,不太适合显示加载框,但小程序的页面跳转并不是很快,如果不作处理又会导致用户反复点击打开多个页面,这里可以使用限制按钮或控件的点击间隔的方式处理,同样可以将这个方法放到公共的代码里面比如util,然后在使用时直接调用即可。

function buttonClicked(self) {
 self.setData({
  buttonClicked: true
 })
 setTimeout(function () {
  self.setData({
   buttonClicked: false
  })
 }, 500)
}

首先需要在页面对应的js文件里面增加一个buttonClicked数据对象,然后在点击事件里面调用上述方法。

Page({
 data: {
  buttonClicked: false
 },
 click: function (e) {
  util.buttonClicked(this);
  var id = e.currentTarget.dataset.id;
  wx.navigateTo({
   url: '../detail/detail?id=' + id
  })
 },
})

另外,在wxml的点击控件中通过buttonClicked判断是否可以点击,可以用bindtap也可以用disabled

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
Apr 13 Javascript
JQuery实现图片轮播效果
May 08 jQuery
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 #Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 #Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 #Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 #Javascript
微信小程序实现bindtap等事件传参
Apr 08 #Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
php中CI操作多个数据库的代码
2012/07/05 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
PHP队列用法实例
2014/11/05 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
eval与window.eval的差别分析
2011/03/17 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JavaScript中Function详解
2015/02/27 Javascript
jQuery插件datepicker 日期连续选择
2015/06/12 Javascript
JSON+Jquery省市区三级联动
2016/01/13 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
解决vue 打包发布去#和页面空白的问题
2018/09/04 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
Python中SQLite如何使用
2020/05/27 Python
解决python和pycharm安装gmpy2 出现ERROR的问题
2020/08/28 Python
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
在阿联酋购买翻新手机和平板电脑:Teckzu
2021/02/12 全球购物
实习自我评价怎么写
2013/12/02 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技