小程序优化~~~节流函数

时间:2021-07-12
本文章向大家介绍小程序优化~~~节流函数,主要包括小程序优化~~~节流函数使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

场景

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

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

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

会造成返回多次现象

解决方式

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

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

1.首先在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抛出函数

module.exports = {
  throttle: throttle
}

2.在页面逻辑中使用

首先要引入util.js

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

在需要使用的函数

checkBtn: util.throttle(function (e) {
    wx.navigateTo({
      url: '../X/X',
    })
  }, 3000),

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

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

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

原文地址:https://www.cnblogs.com/kaicy/p/15001390.html