微信小程序防止用户重复点击按钮

最新推荐文章于 2022-08-30 09:51:26 发布

�Distance.?

最新推荐文章于 2022-08-30 09:51:26 发布

阅读量613

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/weixin_45847120/article/details/108414914

版权

本文针对微信小程序中用户可能因网络延迟而重复点击按钮导致多次操作的问题，提出了利用函数节流的解决方案。通过引入节流技术，确保在设定的时间间隔内，无论用户点击多少次，按钮只会执行一次请求，避免了不必要的页面跳转。

摘要由CSDN通过智能技术生成

场景

在使用小程序的时候会出现这样的一些情况：当网络出现卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况

解决办法

然后从轻松理解js函数节流和函数防抖中找到了解决办法，就是函数节流：函数在一段时间多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数
/utils/utils.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 = {
  formatTime: formatTime,
  RandNum: RandNum,
  showLoading: showLoading,
  hideLoading: hideLoading,
  ajaxPost: ajaxPost,
  ajaxGet: ajaxGet,