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

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

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

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

相关推荐
The_era_achievs_hero6 小时前
UniappDay03
vue.js·微信小程序·uni-app
说私域9 小时前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者81 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld1 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析1 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx9910131 天前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg
说私域1 天前
基于开源链动2+1模式AI智能名片S2B2C商城小程序的私域流量池用户运营研究
人工智能·小程序·开源
一只一只妖1 天前
uniapp小程序上传图片并压缩
小程序·uni-app
zkmall1 天前
小程序卡顿到丝滑体验:ZKmall开源商城性能优化与兼容修复实战指南
性能优化·小程序
CodeUp.1 天前
校园二手交易小程序的设计与实现
小程序