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

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

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

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、完工,去试试效果吧!

相关推荐
阿里巴巴AI编程社区13 小时前
用Qoder打造自己的AI工作台,普通人也可10倍提效!
微信小程序
星光一影18 小时前
美容/心理咨询/问诊/法律咨询/牙医预约/线上线下预约/牙医行业通用医疗预约咨询小程序
mysql·小程序·vue·php·uniapp
游戏开发爱好者819 小时前
H5 混合应用加密 Web 资源暴露到 IPA 层防护的完整技术方案
android·前端·ios·小程序·uni-app·iphone·webview
wangpq20 小时前
记录曾经打开半屏小程序遇到的事
前端·微信小程序
2501_9151063220 小时前
最新版本iOS系统设备管理功能全面指南
android·macos·ios·小程序·uni-app·cocoa·iphone
游戏开发爱好者820 小时前
HTTPS DDoS 排查 异常流量到抓包分析
网络协议·ios·小程序·https·uni-app·iphone·ddos
jay神20 小时前
【原创】基于小程序的图书馆座位预约系统
微信小程序·小程序·毕业设计·图书馆自习室座位预约系统·座位预约系统
计算机徐师兄21 小时前
Java基于微信小程序的物流管理系统【附源码、文档说明】
java·微信小程序·物流管理系统·java物流管理系统小程序·物流管理系统小程序·物流管理系统微信小程序·java物流管理系统微信小程序
一点晖光21 小时前
小程序中web-view加载uni-app H5如何使用postMessage方法的解决方案
前端·小程序·uni-app
2501_9159184121 小时前
iOS 性能监控 运行时指标与系统行为的多工具协同方案
android·macos·ios·小程序·uni-app·cocoa·iphone