专栏首页疯狂的小程序防止小程序多次点击跳转解决方案
原创

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

场景

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

解决办法

然后从 轻松理解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 条评论
登录 后参与评论

相关文章

  • 无痛的微信小程序开发体验

    在小程序之初便开发应用了,现在小程序的开发也越来越成熟了,完善了很多的API、组件、架构等,社区也由原来的零星点点到现在的不大不小,但也算是有了,期间也诞生了很...

    疯狂的小程序
  • 像 React Native 开发 APP 一样,用wn-cli 开发 weapp (微信小程序)

    wn-cli 像React组件开发一样来开发微信小程序

    疯狂的小程序
  • ASP获取微信小程序的OpenID服务器端代码

    尝试一下新鲜事物“微信小程序”,其中有一个业务场景,通过微信登陆小程序,这样需要获取小程序的用户ID(也就是openid)。微信小程序从安全角度考虑,不提供直接...

    疯狂的小程序
  • 微信小程序:防止多次点击跳转(函数节流)

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

    前端博客 : alili.tech
  • [PHP] create_function() 代码注入问题已经被弃用

    此函数在内部执行eval(),因此具有与eval()相同的安全性问题。此外,它还具有不良的性能和内存使用特性。 如果您使用的是PHP 5.3.0或更高版本,则应...

    陶士涵
  • 什么是多态?如何实现?只看这一篇就够了

    多态的概念:通俗来说,就是多种形态,具体点就是去完成某个行为,当不同的对象去完成时会产生出不同的状态。

    海盗船长
  • 第三章(1.2)windows下安装Anaconda+TensorFlow+配置PyCharm

    conda config –add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/fr...

    两只橙
  • 公司ES升级带来的坑怎么填?

    公司的ES最近需要全部进行升级,目的是方便维护和统一管理。以前的版本不统一,这次准备统一升级到一个固定的版本。

    猿天地
  • Clay: 创建和使用深层次对象图

    Clay 是 CodePlex 上的一个开源项目,帮助我们创建轻松创建对象,就 JavaScript 或其它动态语言一样简单。Clay 项目的网址是 http:...

    张善友
  • Java微信公众平台开发_01_本地服务器映射外网

    花生壳需要6元的认证费用,而且用的时候还老是断掉。(我的是这样,不知道你们的是不是)

    shirayner

扫码关注云+社区

领取腾讯云代金券