防止小程序多次点击跳转解决方案

场景

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

解决办法

然后从 轻松理解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得到的thisundefined, 或者想要获取微信组件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
        }
    }
}

再次点击按钮thise都有了:

参考

  • 轻松理解JS函数节流和函数防抖

源代码

  • tomfriwel/MyWechatAppDemo 的throttle页面

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术碎碎念

浅谈Struts2

学过SSH框架很长一段时间了,一直没有很系统的总结一下,这里先简单谈谈Struts2。 为什么要用Struts2? 这里列举一些Servlet的缺点: 1、每写...

3377
来自专栏大内老A

.NET Core下的日志(3):如何将日志消息输出到控制台上

当我们利用LoggerFactory创建一个Logger对象并利用它来实现日志记录,这个过程会产生一个日志消息,日志消息的流向取决于注册到LoggerFacto...

4099
来自专栏Jimoer

JVM学习记录-类加载器

JVM设计团队把类加载阶段中的“通过一个类的全限定名来获取描述此类的二进制字节流”这个动作放到Java虚拟机外面去实现,以便让应用程序自己决定如何去获取所需要的...

711
来自专栏大内老A

依赖注入[6]: .NET Core DI框架[编程体验]

毫不夸张地说,整个ASP.NET Core框架是建立在一个依赖注入框架之上的,它在应用启动时构建请求处理管道过程中,以及利用该管道处理每个请求过程中使用到的服务...

811
来自专栏西安-晁州

纯数字验证码

登录时常常要用到验证码验证,下面是一个简单的纯数字验证码,详细代码见image.jsp,将每次生成的验证码文本直接存入session中,登录时方便后台从sess...

2910
来自专栏云计算与大数据

记录: 学会用emacs 阅读代码-如何翻页-拷贝-撤销

https://www.reddit.com/r/emacs/comments/7i2alo/how_to_read_and_understand_gnu_em...

1501
来自专栏我的技术专栏

Linux工具入门:make工具与Makefile文件

1923
来自专栏小樱的经验随笔

汇编语言第三版答案(王爽)

汇编语言答案(王爽)  此文只是用来存个档,不喜勿喷 检测点1.1 (1)1个CPU的寻址能力为8KB,那么它的地址总线的宽度为 13位。 (2)1KB的存储器...

51411
来自专栏君赏技术博客

一键替换Key Mac软件的制作教程第二篇

我们写的导入方法,需要提示用户错误信息,我们用NSAlert提示用户。新建一个类OAlertMessage。

1172
来自专栏李家的小酒馆

Struts2知识整理

struts2简介 struts2是基于mvc开发模型的框架,属于表现层框架 核心为拦截器 struts2框架的特点 基于MVC,结构清晰 丰富的标签库,提高了...

2180

扫码关注云+社区

领取腾讯云代金券