微信小程序多次触发事件导致页面连续跳转问题以及解决方法

最近在小程序开发过程中，当网络条件差或卡顿的情况下，大多数使用者会认为点击无效而进行多次点击，最后出现多次跳转甚至一直循环跳转的情况。

最后经过多次查阅以及微信小程序官方文档的介绍：

页面在跳转的时候需要一定的时间，在完成跳转前，触发该跳转的事件可能多次发生。

经过断点调试，从调试记录上可以看到触发了多次甚至连续不断的事件，从而导致多次或循环跳转。

以上问题可以通过JS中的函数节流和函数防抖找到解决方法。

例如下图所示：在开发过程中tab页在真机上出现类似问题的频率很高

具体解决方法如下：

使用函数节流(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.apply(this, arguments)   //将this和参数传给原函数
          _lastTime = _nowTime
      }
  }
}
module.exports = {
  throttle: throttle
}

以上util.js文件中的fn.apply(this,arguments)是将函数的属性与方法进行拷贝(主要将this和参数传给原函数),主要是实现类的继承。

防止this.data得到的this是undefined, 或者想要获取点击函数的数据e也是undefined。

/pages/xx-list/xx-list.wxml:

  <view data-current="0" bindtap="swichNav" data-current="0">11</view>

/pages/xx-list/xx-list.js:

const util = require('../../utils/util.js')

Page({
    data: {
        
    },
    onLoad: function (options) {

    },
    swichNav: util.throttle(function (e) {
        console.log(this)
        console.log(e)
    }, 1000),
})

以上代码可以解决页面连续跳转的问题。

大家如果有更好的方法可以分享出来哦。