js防止按钮重复点击

JavaScript实现按钮点击防抖动机制

最新推荐文章于 2024-09-30 17:11:44 发布

原创最新推荐文章于 2024-09-30 17:11:44 发布 · 530 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

该代码示例展示了如何使用JavaScript实现按钮点击的防抖动功能。当用户连续点击按钮时，如果在3秒内再次点击，会弹出提示，阻止处理逻辑执行，直到3秒无点击。clickTime变量用于记录上一次点击时间，确保至少间隔3秒才执行处理逻辑。

<div>
      <button onclick="handleClick()">按钮</button>
    </div>

   //点击按钮事件的处理方法
      function handleClick() {
        let nowTime = +new Date(); //获取当前时间的时间戳
        if (nowTime - this.clickTime < 3000) {
          //clickTime 是页面定义的一个全局变量，默认值为“-1”
          alert("已点击按钮,请3秒后再试~~");
          return;
        }
        this.clickTime = +new Date(); //将点击按钮的时间赋值到全局变量
        //点击按钮需要处理的逻辑代码~~
      }