小程序节流函数

Share

场景

小程序的页面添加跳转或者触发一个函数，发现在超过0.3s的连续点击中

小程序的机制会多次触发，尤其在使用navigateTo 进行跳转的时候

快速点击，发现会连续跳转，虽然不会对页面的栈造成堆积，如果你不使用wx.navigateBack

会造成返回多次现象

解决方式

可以使用throttle节流函数，进行封装一个小程序专有的函数

保证在可控时间内，这个函数的事件只能触发一次

1.首先在util.js创建节流函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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抛出函数

1
2
3
module.exports = {
  throttle: throttle
}

2.在页面逻辑中使用

首先要引入util.js

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

在需要使用的函数

1
2
3
4
5
checkBtn: util.throttle(function (e) {
    wx.navigateTo({
      url: '../X/X',
    })
  }, 3000),

函数中加入的3s为，从触发函数到3s在这个时间内，这个函数只能执行一次

这样就完美避开了，如何防止多次触发函数事件了

而且3s后这个函数事件恢复正常