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


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 相关文章推荐
麻雀虽小五脏俱全 Dojo自定义控件应用
Sep 04 Javascript
Jquery事件的连接使用示例
Jun 18 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
js中less常用的方法小结
Aug 09 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
mpvue构建小程序的方法(步骤+地址)
May 22 Javascript
详解组件库的webpack构建速度优化
Jun 18 Javascript
微信小程序 搜索框组件代码实例
Sep 06 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学习笔记之面向对象编程
2012/12/29 PHP
PHP如何将XML转成数组
2016/04/04 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
JavaScript引用类型和基本类型详解
2016/01/06 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
基于python编写的微博应用
2014/10/17 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python 以16进制打印输出的方法
2018/07/09 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
keras slice layer 层实现方式
2020/06/11 Python
python怎么自定义捕获错误
2020/06/29 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
消防安全检查制度
2014/02/04 职场文书
合作意向书模板
2014/03/31 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书