微信小程序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 相关文章推荐
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
webpack教程之webpack.config.js配置文件
Jul 05 Javascript
javaScript实现复选框全选反选事件详解
Nov 20 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 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
无限级别菜单的实现
2006/10/09 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
yii2.0框架实现上传excel文件后导入到数据库的方法示例
2020/04/13 PHP
基于jQuery的日期选择控件
2009/10/27 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript中tostring()和valueof()的用法及两者的区别
2015/11/16 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
微信小程序表单验证功能完整实例
2017/12/01 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
JS实现利用两个队列表示一个栈的方法
2017/12/13 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
在Python操作时间和日期之asctime()方法的使用
2015/05/22 Python
Python Tkinter模块实现时钟功能应用示例
2018/07/23 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
bluepy 一款python封装的BLE利器简单介绍
2019/06/25 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
Python生成随机验证码代码实例解析
2020/06/09 Python
Sperry官网:帆船鞋创始品牌
2016/09/07 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
自荐信格式
2013/12/01 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
南湾猴岛导游词
2015/02/09 职场文书
婚庆司仪开场白
2015/05/29 职场文书
丧事主持词
2015/07/02 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Python内置的数据类型及使用方法
2022/04/13 Python