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

场景

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

解决办法

然后从 轻松理解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都有了:

参考

源代码

转 : http://www.wxapp-union.com/portal.php?mod=view&aid=3618

https://blog.csdn.net/rolan1993/article/details/79170513

原文地址:https://www.cnblogs.com/fps2tao/p/12186523.html

时间: 2024-10-15 03:44:18

微信小程序:防止多次点击跳转(函数节流)的相关文章

干掉微信小程序-避免多次点击,重复触发事件

干掉微信小程序-避免多次点击,重复触发事件 问题描述 开发小程序时,或者说是在做前端的时候,我们经常会遇到当用户点击某个按钮时,没有得到反馈的话,大部分用户都会接着点击,这就会造成前端接收到多次请求的响应. 这主要是因为后端api请求需要时间,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮. 所以,接下来说说,在微信小程序中避免多次点击,重复触发事件的两种思路. 解决方法一: 使用 wx.showLoading 在请求执行之前显示一个加载框,请求完成后再关闭加载框. j

微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理

前言: 小程序开发中诸如获取用户手机号码.调起微信支付.领取卡券等api都是会有一定的延迟的.也就是说通过点击按钮调用这些api的时候,从点击按钮调用api,到支付页面或者领取卡券界面展示出来是需要一定时间的,连续点击按钮,还是有可能会重复调用的. 虽然这种情况有点极端,正常用户是不会这么连续快速的点击按钮的,但是也不能排除有用户手抖,连续点了两下.如果重复调用的话,不仅体验不好,单击事件中涉及到后端接口操作的也可能引起其他异常.所以这个问题还是要处理下的. 刚开始想到的是使用loading开启

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 wx.switchTab({url: '...',}) 来实现. 那么,我们反过来,如何从含有tabbar的页面跳转到一个不含有/隐藏了tabbar的页面呢? 在尝试了上述的两个API后发现不起作用,wx.switchTab({url: '...',}) 倒是可以在有tabbar的页面之间跳转,但无法

微信小程序使用wxs在页面中调用js函数,颜色值格式转换 rgb和十六进制的转换

<wxs module="filter"> var filter = { numberToFix: function (hex) { // 16进制颜色值的正则 // var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; var reg = getRegExp('^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$','g'); console.log(reg); console.log('结束'); // 把颜色值

微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法

异常描述: 点击按钮获取用户手机号码,有的时候会出现点击无反应或很久之后才弹出用户授权获取手机号码的弹窗,这种情况下,也会出现点击穿透的问题(详见:微信小程序开发——连续快速点击按钮调用小程序api返回后仍然自动重新调用的异常处理) 异常解析: 1. getPhoneNumber的使用: 对于 getPhoneNumber(OBJECT) API,由于小程序需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 <button> 组件的点击来触发(具体使用方法详见getP

WordPress版微信小程序2.2.8版发布

距离上次更新已经一个月了,这期间对WordPress版微信小程序 做的不少小的更新和性能的优化,此次版本更新推出了两个比较重点的功能:点赞和赞赏.同时,优化了文章页面的功能布局,在评论区把常用的功能:转发,复制,点赞,赞赏,都集中在一个操作面板,同时为了不占用文章页面的空间,做了隐藏. WordPress版微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 了解程序的开发历程及开发技术,建议看看相关版本的更新文章: 1.

关于微信小程序的开发步骤

~~~~包子最近在研究小程序 首先先讲一下小程序一些基本的步骤: 1.登录微信的公众平台,选择小程序,注册一个账号,期间有碰到什么交300块钱的就不要理他,因为我只是做demo,当然,准备上线的企业啥的得交,因为你不交你就审核不过去 2.注册完之后,首先在首页那里下载微信小程序开发工具,点击下载.然后安装 3.在下载开发工具的同时,我们去查一下自己的APPId..这个不要随便给别人看哦,,保密哒..... 4.接下来我们打开我们下载的微信开发工具,扫一下我们绑定的二维码,新建项目,选择一个空的目

一号旺铺微信小程序三大新功能:可相互跳转、批量管理门店

可相互跳转.批量管理门店,小程序是抓住零售新机会的一把利器吗?一号旺铺专业.专注开发小程序,就微信小程序的三个功能与大家分享. 同一个公众号下关联的 10 个同主体小程序和 3 个非同主体小程序之间,可以调用接口直接相互跳转. 微信小程序新动向:可相互跳转.批量管理门店 可相互跳转.批量管理门店,小程序是抓住零售新机会的一把利器吗? 小程序到底能不能抓住零售新机会,成效还在验证中.不过为了实现这一目标,小程序又释放了一个重大功能. 6 月 21 日深夜,微信官方表示,与同一公众号关联的小程序之间

微信小程序商店 | 即速商店_二手类小程序

即速应用商店_分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可免费发布 自己的小程序获取巨大流量 . PS:关于微信小程序商店_即速商店?   如何免费发布微信小程序,获取流量? 微信小程序商店|即速商店_二手小程序 要求:本次安利的可是二手类福利小程序,专业回收/出售各种闲置商品!注意,想在该类目下提交的微信小程序须具备购物.二手相关属性.如小程序内发布虚假违法信息,由小程序主体承担.点击 > 即刻提交 < 本期二手小