微信小程序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 相关文章推荐
JQuery浮动DIV提示信息并自动隐藏的代码
Aug 29 Javascript
一起来写段JS drag拖动代码
Dec 09 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
May 11 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 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
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Seajs源码详解分析
2019/04/02 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
详解django自定义中间件处理
2018/11/21 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
python pickle存储、读取大数据量列表、字典数据的方法
2019/07/07 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
外国语学院毕业生自荐信
2013/10/28 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
2014年服务员工作总结
2014/11/18 职场文书
荒岛余生观后感
2015/06/09 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
python中 .npy文件的读写操作实例
2022/04/14 Python