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


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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
JavaScript触发器详解
Mar 10 Javascript
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
浅谈JavaScript异常处理语句
Jun 26 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
JS中this的指向以及call、apply的作用
May 06 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
「中高级前端面试」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
php获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
PHP curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
jquery的键盘事件修改代码
2011/02/24 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
JavaScript基础篇(6)之函数表达式闭包
2015/12/11 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
2017/03/24 jQuery
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
python通过post提交数据的方法
2015/05/06 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
python爬取51job中hr的邮箱
2016/05/14 Python
Python编程实现二分法和牛顿迭代法求平方根代码
2017/12/04 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
Python修改DBF文件指定列
2020/12/19 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
MYSQL基础面试题
2012/05/13 面试题
幼儿园实习自我鉴定
2013/12/15 职场文书
学生宿舍管理制度
2014/01/30 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
销售人员求职信
2014/07/22 职场文书
批评与自我批评范文
2014/10/15 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
2019各种承诺书范文
2019/06/24 职场文书