微信小程序防止多次点击跳转(函数节流)


Posted in Javascript onSeptember 19, 2019

场景

在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次):

微信小程序防止多次点击跳转(函数节流)

解决办法

然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数。

/utils/util.js:

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()
   _lastTime = _nowTime
  }
 }
}

module.exports = {
 throttle: throttle
}
/pages/throttle/throttle.wxml:

<button bindtap='tap' data-key='abc'>tap</button>
/pages/throttle/throttle.js

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)
})

这样,疯狂点击按钮也只会1s触发一次。

但是这样的话出现一个问题,就是当你想要获取this.data得到的this是undefined, 或者想要获取微信组件button传递给点击函数的数据e也是undefined,所以throttle函数还需要做一点处理来使其能用在微信小程序的页面js里。

微信小程序防止多次点击跳转(函数节流)

出现这种情况的原因是throttle返回的是一个新函数,已经不是最初的函数了。新函数包裹着原函数,所以组件button传递的参数是在新函数里。所以我们需要把这些参数传递给真正需要执行的函数fn。

最后的throttle函数如下:

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
  }
 }
}

再次点击按钮this和e都有了:

微信小程序防止多次点击跳转(函数节流)

参考

总结

以上所述是小编给大家介绍的微信小程序防止多次点击跳转(函数节流),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
JavaScript对象的property属性详解
Apr 01 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
基于AngularJS实现的工资计算器实例
Jun 16 Javascript
Puppet的一些技巧
Sep 17 Javascript
js自定义input文件上传样式
Oct 26 Javascript
vue-router实现编程式导航的代码实例
Jan 19 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
详解Vue调用手机相机和相册以及上传
May 05 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
layui按条件隐藏表格列的实例
Sep 19 #Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 #Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 #Javascript
iview form清除校验状态的实现
Sep 19 #Javascript
对layui中table组件工具栏的使用详解
Sep 19 #Javascript
layui自定义工具栏的方法
Sep 19 #Javascript
Node 代理访问的实现
Sep 19 #Javascript
You might like
php 静态变量的初始化
2009/11/15 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
PHP防止post重复提交数据的简单例子
2014/06/07 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
Javascript 函数对象的多重身份
2009/06/28 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
ExtJS实现文件下载的方法实例
2013/11/09 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
2014/05/05 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
spyder常用快捷键(分享)
2017/07/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python logging.info在终端没输出的解决
2020/05/12 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
英国领先的男装设计师服装独立零售商:Repertoire Fashion
2020/10/19 全球购物
大学应届生求职简历的自我评价
2013/10/08 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
法制教育演讲稿
2014/09/10 职场文书
手机被没收的检讨书
2014/10/04 职场文书
Python开发简易五子棋小游戏
2022/05/02 Python