微信小程序之按钮短时间内被多次点击问题

小新110

已于 2025-06-11 08:55:33 修改

阅读量403

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

于 2025-05-14 10:09:06 首次发布

本文链接：https://blog.youkuaiyun.com/cau_eric/article/details/147947457

微信小程序专栏收录该内容

27 篇文章

订阅专栏

做项目的时候碰到这个问题，按钮的功能做好了，但是总会出现按的太快，出现不可预料的问题。

解决方法之一：借助函数节流来实现

1、创建一个工具包（throttle.js）,通过封装一个高阶函数，对函数的执行频率进行限制。：

function throttle(fn, gapTime) {
  let _lastTime = null;
  return function() {
    let _nowTime = +new Date();
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn.apply(this, arguments);
      _lastTime = _nowTime;
    }
  }
}

module.exports = {
  throttle
}

2、在我们的按钮响应函数(handleClick)中使用：

const { throttle } = require('../../utils/throttle.js');

Page({
  handleClick: throttle(function() {
    // 处理点击逻辑
  }, 2000) // 2秒内只执行一次
});

3、完工，去试试效果吧！