如何用纯JavaScript实现setTimeout计时周期内屏蔽重复点击功能

核心逻辑是新增冷却状态标记，第一次点击后立即进入冷却期，冷却期内所有后续点击直接拦截，计时结束后恢复可点击状态。

基础实现（最小改动原代码） #

仅修改JS逻辑，原有HTML代码无需调整：

// 冷却状态标记，初始为false表示未冷却
let isCooldown = false;

function alertBtn() {
  // 冷却期内直接忽略点击请求
  if (isCooldown) return;
  // 触发点击后立即上锁进入冷却
  isCooldown = true;
  setTimeout(() => {
    alertFunc();
    // 执行完逻辑后解除冷却
    isCooldown = false;
  }, 3000);
}

function alertFunc() {
  alert("Alert is clicked so remain alerted");
}

优化实现（无全局变量污染+用户体验提升） #

直接将冷却状态挂载到按钮元素上，同时增加按钮禁用、文案提示逻辑，让用户直观感知冷却状态：

JavaScript代码 #

function alertBtn(e) {
  const targetBtn = e.target;
  // 检查按钮自身存储的冷却状态
  if (targetBtn.isCooldown) return;

  // 标记冷却+更新按钮状态
  targetBtn.isCooldown = true;
  targetBtn.disabled = true;
  targetBtn.innerText = "3秒后可再次点击";

  setTimeout(() => {
    alertFunc();
    // 恢复按钮状态
    targetBtn.isCooldown = false;
    targetBtn.disabled = false;
    targetBtn.innerText = "Alert me";
  }, 3000);
}

HTML代码（仅需新增事件对象传参） #

<button onclick="alertBtn(event)">Alert me</button>

内容的提问来源于stack exchange，提问作者Yupma