潮童街拍

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

 更新时间:2019-09-14 22:01:23   作者:佚名   我要评论(0)

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

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

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 点击事件具体执行那个业务  
  }
 }
 }

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

您可能感兴趣的文章:

  • 微信小程序云函数使用mysql数据库过程详解
  • 小程序云开发教程如何使用云函数实现点赞功能
  • 小程序云函数调用API接口的方法
  • 微信小程序Page中data数据操作和函数调用方法
  • 微信小程序提取公用函数到util.js及使用方法示例
  • 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
  • 微信小程序 定义全局数据、函数复用、模版等详细介绍
  • 微信小程序 Page()函数详解

潮童街拍相关的文章

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

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

    这篇文章主要介绍了微信小程序使用函数防抖解决重复点击消耗性能问题实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值
    2019-09-14
  • 使用VScode 插件debugger for chrome 调试react源码的方法

    使用VScode 插件debugger for chrome 调试react源码的方法

    代码调试,是我们前端日常工作中不可或缺的能力了吧! 在面向dom开发的时代,我们开发时直接在chrome里打断点是很方便的。 但是,当我们面向组件开发时(
    2019-09-14
  • 小程序如何支持使用 async/await详解

    小程序如何支持使用 async/await详解

    前言 小程序本身是不支持async/await语法的,但有些应用场景,我们使用async/await会使得代码更简洁,也更易于维护,用过都知道是有多爽的。既然小程序不支
    2019-09-14
  • layui点击数据表格添加或删除一行的例子

    layui点击数据表格添加或删除一行的例子

    数据表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[
    2019-09-14
  • layui 对table中的数据进行转义的实例

    layui 对table中的数据进行转义的实例

    方法一 通过done回调进行遍历: //方法级渲染 table.render({ id: 'demoList', elem: '#demoList' , url: 'showDemoList' ,
    2019-09-14
  • nodejs一个简单的文件服务器的创建方法

    nodejs一个简单的文件服务器的创建方法

    简单的文件服务器 有时候,我们想读取一些服务器上的文件,但是又不想写太复杂的程序,可以考虑用nodejs,可以很简单的写出一个文件服务器 下面是我写的
    2019-09-14
  • Node.JS用纯JavaScript生成图片或滑块式验证码功能

    Node.JS用纯JavaScript生成图片或滑块式验证码功能

    有一些Node.JS图片生成类库,比如node-captcha等的类库,需要c/c++程序生成图片。跨平台部署不是很方便。这里介绍几个用纯JS实现的图片验证码生成模块。 capt
    2019-09-14
  • 对layui初始化列表的CheckBox属性详解

    对layui初始化列表的CheckBox属性详解

    通常layui前端页面完全按照layui官网的例子写所有的页面初始化都没有问题,但是那只是静态页面.当加入后台去动态加载页面的时候有写样式在初始化加载样式的时候
    2019-09-14
  • 基于JavaScript 实现拖放功能

    基于JavaScript 实现拖放功能

    HTML 的拖放 API 依赖 DOM 事件模型,获取拖放和放置元素的相关信息,以此实现拖放功能。我们只需要注册很少几个事件监听器,就能把任何元素变成可拖动或可放
    2019-09-14
  • layui表格数据复选框回显设置方法

    layui表格数据复选框回显设置方法

    layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现: 我们只需要在渲染数据回调时找到每个复选
    2019-09-14

最新评论

神马电影网www.hmlhsw.com