锐客网

  1. 首页 > it技术 > >

js防双击功能

js

定时器防双击

  • 封装
/* *定时器防双击 *参数：seconds - 多少毫秒后可以点击，默认500 *返回 - Boolean，是否已点击，true-是 */ //封装 let isClick = false function preventDoubleClick(seconds) { if (isClick) { return true } else { isClick = true setTimeout(() => { isClick = false }, seconds || 500) return false } } //调用 function handle(){ if(preventDoubleClick()) return //业务逻辑 }

  • 缺点
    1. 只能防止固定时间内的双击操作
    2. seconds太大，影响体验
    3. 接口调用慢时（超过senconds），无法防止再次点击
    4. 购买等重要操作，前端不能真正防重（后端也需要）
  • 优点
    1. 调用方便
弹窗
  • 实现
    1. 点击按钮，打开mask弹窗，禁止操作（类似小程序showLoading）
    2. 所有业务完成后，关闭弹窗
  • 问题：
    1. 业务流程不需要弹窗，或者过程中已有其他弹窗
    2. 业务的所有结束点，均需关闭弹窗
变量控制
  • 实现
    1. 类似用一个变量替代弹窗的效果
    2. 变量的true/false代表是否已经点击，该功能执行完成后，重置变量
  • 问题
    1. 变量如果未重置，则按钮不可点击
    2. 业务功能复杂，则重置代码地方多
    3. 使用组件，可能出现组件通信和公共变量使用，无法很好封装，且代码比较分散
  • 有点
    1. 真正的防止双击，且无副作用（弹窗）

    推荐阅读


    上一篇：java输入时想通过回车（enter）来结束输入的解决办法

    下一篇：转换成小写字母