PC或移动端：过快多次点击，重复调用问题

最新推荐文章于 2025-05-28 23:39:14 发布

拈花醉。

最新推荐文章于 2025-05-28 23:39:14 发布

阅读量487

点赞数

分类专栏：前端文章标签：小程序

本文链接：https://blog.youkuaiyun.com/weixin_52541520/article/details/115216921

版权

前端专栏收录该内容

10 篇文章

订阅专栏

针对微信小程序中用户快速点击导致的重复调用问题，本文介绍了两种解决方案：1) 设置透明遮罩层以防止连续点击；2) 应用节流技术来限制点击事件的触发频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在微信小程序中，用户点击按钮或控件时，如果响应较慢，会重复点击，多次调用的问题。

1、设置透明遮罩层

wx.showLoading({
   title: message, 
   mask: true
});

2、使用节流

 /**
   * 点击跳转路径接口 ==  节流
   */
  goToPage: util.throttle(function (e) {
    let that = this
    that.goPage(e)
  }),

/**
 * 节流  函数节流是立马执行，n秒后再立马执行
 *  函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。
 * @param {*} fn  回调函数
 * @param {string} gapTime  时间
 */
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 //赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  }
}