微信小程序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对象[0]是什么含义?
Jul 31 Javascript
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
May 25 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
angularjs中$http异步上传Excel文件方法
Feb 23 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
js实现橱窗展示效果
Jan 11 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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来处理多个提交任务
2006/10/09 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
php socket方式提交的post详解
2008/07/19 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
Linux php 中文乱码的快速解决方法
2016/05/13 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
jquery 图片缩放拖动的简单实例
2014/01/08 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
如何让你的JS代码更好看易读
2017/12/01 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
js实现每日签到功能
2018/11/29 Javascript
JavaScript闭包与作用域链实例分析
2019/01/21 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
python类参数self使用示例
2014/02/17 Python
python简单程序读取串口信息的方法
2015/03/13 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python faker生成器生成虚拟数据代码实例
2020/07/20 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
护士自荐信怎么写
2013/10/18 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
高二语文教学反思
2016/02/16 职场文书
业余无线电通联Q语
2022/02/18 无线电
nginx 配置指令之location使用详解
2022/05/25 Servers