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

场景

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

解决办法

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

参考

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

总结

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

(0)

相关推荐

  • 微信小程序按钮点击跳转页面详解

    微信小程序中,按钮也是<button></button>标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkPage', }) 跳转到talkPage界面. 注意,html界面要在app.json里面注册: 不注册的话会报错:navigateTo:fail url "pages/index/talkPage" is not in app.j

  • 微信小程序BindTap快速连续点击目标页面跳转多次问题处理

    问题描述: 1)wxml片段 <view bindtap="loadMulti"> <text>连续点击,加载多次</text> </view> <view bindtap="loadOnce"> <text>连续点击,加载一次</text> </view> 2)js代码片段 loadMulti:function(e) { wx.navigateTo({ url: '/p

  • 微信小程序实现点击文字页面跳转功能【附源码下载】

    本文实例讲述了微信小程序实现点击文字页面跳转功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.js文件 Page({ data:{ // text:"这是一个页面" }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 }, onReady:function(){ // 页面渲染完成 }, onShow:function(){ // 页面显示 }, onHide:function(){ // 页面

  • 微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现 其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn

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

    场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

  • 微信小程序出现wx.navigateTo页面不跳转问题的解决方法

    本文实例讲述了微信小程序出现wx.navigateTo页面不跳转问题的解决方法.分享给大家供大家参考,具体如下: 今天在做微信小程序的时候,做的商品购买流程.流程是这样的: 商品展示-->商品详情-->下单页面-->下单详情页面-->支付结果页面-->跳转订单详情页面. 但是在支付成功之后,点击按钮跳转,发现怎么也跳转不了到订单详情页面,前后log都能打印出来,证明已经执行了wx.navigateTo方法,但是跳转不成功,而且,坑爹的是也不报错. 翻看微信小程序开发文档,参考

  • 微信小程序页面传多个参数跳转页面的实现方法

    这里举例跳转两个参数 传递多少个也可以 这里传参数 我写作 data-item data-id 来绑定 同事加了点击事件bindtap 在index.js 在 data 里我写的是假数据 在跳转页面的函数里传e 后面定义的东西根据e来确定 可以在console打印 console.log(e) 这样我们就拿到了 传递的数据 然后进行定义等 这里跳转详情页的函数 wx.navigateTo 这是一种跳转的方法 tabBar页面要用wx.switchTab 路径后面加上 jsonStr 等 在跳转的

  • 微信小程序和H5页面间相互跳转代码实例

    这篇文章主要介绍了微信小程序和H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.微信小程序跳转小程序 wx.navigateToMiniProgram // 小程序跳转 /* * appId string 是 要打开的小程序 appId * path string 否 打开的页面路径,如果为空则打开首页 * extraData object 否 需要传递给目标小程序的数据,目标小程序可在 App.onLaunch,A

  • 微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)

    上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面 <view class='page_row' bindtap="suo"> <view class="search"> <view class="df search_arr"> <icon class="searchcion" size='20' type='search'></icon>

  • 微信小程序scroll-view锚点链接滚动跳转功能

    html <view class="list"> <view bindtap='jumpTo' wx:for="{{keys}}" data-item="{{item}}">{{item}}</view> </view> <scroll-view scroll-into-view="{{toitem}}" scroll-y="true" scroll-w

  • 微信小程序加载更多 点击查看更多

    本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 微信小程序加载更多,是将之前的数据和点击加载后请求的数据用concat拼接在一起并执行setData,下面是一个简单的栗子: index.wxml代码如下 <view wx:for="{{duanziInfo}}" wx:for-item="name" wx:for-index="id"> <view class="duanzi-vie

  • 微信小程序地图(map)组件点击(tap)获取经纬度的方法

    微信小程序中使用地图(map)组件,通过点击(tap)获取经纬度,按照官方的回应,暂时是没法做到的,从地图组件API多有残缺判断,怀疑是个实习生干的... 做个变通,适用性有限,请大家参考.基本思路就是在地图上铺满一层marker,从而通过点击marker获得经纬度. 复制代码 代码如下: <map id="map" longitude="102.324520" latitude="40.099994" scale="4"

  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历选择器插件点击日历日期可以获取到年月日,具体内容如下 wxml <view class="canlendarBgView"> <view class="canlendarView"> <view class="canlendarTopView"> <view class="leftBgView" bindtap="handleCalendar" dat

随机推荐