微信小程序 函数防抖 解决重复点击消耗性能问题实现代码


Posted in Javascript onSeptember 12, 2019

这篇文章主要介绍了微信小程序使用函数防抖解决重复点击消耗性能问题实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

wxml:

<view bindtap="doubleTap" bindtouchstart="touchStart" bindtouchend="touchEnd">click me</view>

 js:

// 防止重复点击
 touchStart(e) {
  this.touchStartTime = e.timeStamp;
 },
 touchEnd(e) {
 this.touchEndTime = e.timeStamp;
 },
 doubleTap(e) {
 var vm = this;
 // 控制点击事件在350ms内触发,加这层判断是为了防止长按时会触发点击事件
 if (vm.touchEndTime - vm.touchStartTime < 350) {
  // 当前点击的时间
  var currentTime = e.timeStamp;
  var lastTapTime = vm.lastTapTime;
  // 更新最后一次点击时间
  vm.lastTapTime = currentTime;
  // 如果两次点击时间在300毫秒内,则认为是双击事件
  if (currentTime - lastTapTime > 300) {
  // do something 点击事件具体执行那个业务  
  }
 }
 }

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

Javascript 相关文章推荐
图片上传即时显示缩略图的js代码
May 27 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
javascript实现限制上传文件大小
Feb 06 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
angular2路由切换改变页面title的示例代码
Aug 23 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 #Javascript
layui实现checkbox的目录树tree的例子
Sep 12 #Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 #Javascript
使用flow来规范javascript的变量类型
Sep 12 #Javascript
LayUI数据接口返回实体封装的例子
Sep 12 #Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 #Javascript
layui框架与SSM前后台交互的方法
Sep 12 #Javascript
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
PHP实现加强版加密解密类实例
2015/07/29 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
腾讯的ip接口 方便获取当前用户的ip地理位置
2010/11/25 Javascript
JS继承 笔记
2011/07/13 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
微信小程序实现倒计时调用相机自动拍照功能
2018/06/10 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
小白入门篇使用Python搭建点击率预估模型
2018/10/12 Python
python怎么删除缓存文件
2020/07/19 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
应用心理学个人求职信范文
2013/12/11 职场文书
技术比武方案
2014/05/19 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
企业催款函范本
2015/06/24 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
灵能百分百第三季什么时候来?
2022/03/15 日漫