微信小程序BindTap快速连续点击目标页面跳转多次问题处理


Posted in Javascript onApril 08, 2019

问题描述:

1)wxml片段

<view bindtap="loadMulti">
  <text>连续点击,加载多次</text>
</view>
<view bindtap="loadOnce">
  <text>连续点击,加载一次</text>
</view>

2)js代码片段

loadMulti:function(e) {
  wx.navigateTo({
    url: '/pages/loadMulti/index',
  })
},

3)快速,连续点击“连续点击,加载多次”文本串时,我们会发现,目标页面loadMulti/index页面被加载了N次,需要点击N次返回,才可以返回到主页面。

问题原因剖析:

小程序基于MINA框架,该框架的核心框架的核心是一个响应的数据绑定系统,整个系统分为两块视图层(View)和逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新;当点击按钮的时候,视图层会发送 bindtap的事件给逻辑层,逻辑层找到对应的事件处理函数loadMulti执行。

由于视图层发送bindtap事件给逻辑层并找到对应的处理函数需要时间T1,找到对应的处理函数loadMulti后,执行loadMulti函数:wx.navigateTo, hide 原页面,需要时间T2,如果在T1+T2时间内,快速连续点击N次,完全可以加载显示N次目标页面。

解决方案:

loadOnce:function(e) {
  if (!this.pageLoading) {
   this.pageLoading = !0;
   wx.navigateTo({
    url: '/pages/loadOnce/index',
   })
  }
 },
 onShow: function() {
  this.pageLoading = !1;
}

1)loadOnce事件处理函数中,设置pageLoading = true

2)页面的onShow事件中,设置pageLoading = false

其实我们可以封装成方法:

/**

*解决连续点击多次冲出触发事件

*/

function throttle(fn, gapTime) {

  if (gapTime == null || gapTime == undefined) {

    gapTime = 1500

  }

  let _lastTime = null

  // 返回新的函数

  return function () {

    let _nowTime = + new Date()

    if (_nowTime - _lastTime > gapTime || !_lastTime) {

      fn.apply(this, arguments)  //将this和参数传给原函数

      _lastTime = _nowTime

    }

  }

}
<button bindtap='tap' data-key='abc'>tap</button>

const util = require('../../utils/util.js')

Page({

  data: {

    text: 'tomfriwel'

  },

  onLoad: function (options) {

  },

  tap: util.throttle(function (e) {

    console.log(this)

    console.log(e)

    console.log((new Date()).getSeconds())

  }, 1000)

})

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

Javascript 相关文章推荐
Js 订制自己的AlertBox(信息提示框)
Jan 09 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
JS 控制小数位数的实现代码
Aug 02 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
基于jquery编写的放大镜插件
Mar 23 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
Jun 13 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
微信小程序实现底部弹出框
Nov 18 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 #Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 #Javascript
微信小程序实现bindtap等事件传参
Apr 08 #Javascript
详解vue中axios请求的封装
Apr 08 #Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 #Javascript
vue+element+Java实现批量删除功能
Apr 08 #Javascript
如何为你的JavaScript代码日志着色详解
Apr 08 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
Js sort排序使用方法
2011/10/17 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
Javascript将数字转化成为货币格式字符串
2016/06/22 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
vue3中轻松实现switch功能组件的全过程
2021/01/07 Vue.js
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python中的多线程实例教程
2014/08/27 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python实现Decorator模式实例代码
2018/02/09 Python
python和php学习哪个更有发展
2020/06/17 Python
Tory Burch德国官网:美国时尚生活品牌
2018/01/03 全球购物
医药专业应届毕业生求职信范文
2014/01/01 职场文书
《将心比心》教学反思
2014/04/08 职场文书
推广活动策划方案
2014/08/23 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
感恩老师演讲稿400字
2014/08/28 职场文书
西双版纳导游词
2015/02/03 职场文书
2015年财政所工作总结
2015/04/25 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
演讲开场白和结束语
2015/05/29 职场文书
催款函范文
2015/06/24 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python
MySQL中order by的执行过程
2022/06/05 MySQL