JavaScript实现按钮点击计数及过快点击禁用功能问题

你的代码存在几个核心问题，直接修复后即可符合需求：

• 重复绑定点击事件：同时使用onclick和addEventListener绑定两个独立的点击回调，逻辑割裂且会触发执行冲突
• 箭头函数this指向错误：事件回调使用箭头函数时，this不会指向触发事件的按钮元素，会继承外层全局上下文，无法正确读写按钮的dataset属性
• 逻辑不符合需求规则：没有做相邻点击的时间间隔判断，点击就直接禁用按钮1秒，也没有实现「间隔小于1秒时重置计数器」的要求，同时没有把计数同步显示到按钮文本上

可直接运行的完整实现 #

首先是基础HTML结构：

<button id="button" data-clicks="0">点击次数：0</button>

对应JS逻辑：

const button = document.getElementById('button');
let lastClickTime = 0;

// 统一更新按钮显示
const refreshButtonText = (count, isDisabled = false) => {
  button.textContent = isDisabled 
    ? `点击次数：${count}（点击过快，按钮已禁用）` 
    : `点击次数：${count}`;
};

button.addEventListener('click', function() {
  const currentTime = Date.now();
  const clickInterval = currentTime - lastClickTime;

  // 相邻点击间隔短于1秒，触发重置+禁用逻辑
  if (clickInterval < 1000) {
    this.dataset.clicks = 0;
    this.disabled = true;
    refreshButtonText(0, true);
    
    // 1秒后恢复按钮可用状态
    setTimeout(() => {
      this.disabled = false;
      lastClickTime = 0;
      refreshButtonText(0);
    }, 1000);
    return;
  }

  // 间隔符合要求，正常累加计数
  const currentCount = Number(this.dataset.clicks) + 1;
  this.dataset.clicks = currentCount;
  refreshButtonText(currentCount);
  lastClickTime = currentTime;
});

关键逻辑说明 #

• 事件回调使用普通函数而非箭头函数，保证this正确指向绑定事件的按钮元素
• 用lastClickTime变量存储上一次有效点击的时间戳，每次点击时计算间隔判断是否触发惩罚规则
• 计数存储在按钮的data-clicks自定义属性上，每次计数变化同步更新按钮显示文本
• 点击过快触发禁用后，1秒自动恢复按钮可用状态，同时重置时间戳避免恢复后的首次点击误判间隔

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