如何将Timeout绑定到特定HTML元素？解决多按钮超时冲突

你的问题出在全局唯一的timeoutHandle变量上：每次点击新按钮时，clearTimeout(timeoutHandle)会把之前按钮的定时器直接清空，导致只有最后一次点击的按钮定时器能正常执行，前面按钮的对勾就一直留在那儿了。

把定时器和对应的按钮绑定在一起，给每个按钮单独存储自己的定时器ID，这样多个按钮的定时器就不会互相干扰。可以用元素的dataset属性来存储每个按钮专属的定时器ID。

HTML（不变） #

<button class="copy-clip">Copy</button><br>
<button class="copy-clip">Copy</button><br>
<button class="copy-clip">Copy</button><br>

CSS（不变） #

button {
  margin-bottom: 5px;
}

JavaScript（核心修改） #

// 获取所有按钮
const copyEls = document.querySelectorAll('.copy-clip');

copyEls.forEach(el => {
  el.addEventListener('click', (e) => {
    const targetBtn = e.target;
    
    // 先重置当前按钮的文本，避免重复添加对勾
    targetBtn.innerHTML = 'Copy';
    
    // 清除当前按钮已有的定时器（如果之前点过还没到时间）
    if (targetBtn.dataset.timeoutId) {
      clearTimeout(targetBtn.dataset.timeoutId);
    }
    
    // 添加对勾
    targetBtn.innerHTML += '<span class="copy-check"> &#x2713;</span>';
    
    // 设置新定时器，把ID存在按钮的dataset里
    const timeoutId = setTimeout(() => {
      targetBtn.innerHTML = 'Copy';
      // 定时器执行完后清空dataset里的ID（可选，清理冗余数据）
      delete targetBtn.dataset.timeoutId;
    }, 1000);
    
    targetBtn.dataset.timeoutId = timeoutId;
  });
});

• 移除了全局的timeoutHandle，改用每个按钮的dataset.timeoutId存储自身的定时器ID，实现定时器与按钮一对一绑定
• 点击按钮时先清除自身已有的定时器，避免重复点击时多个定时器叠加触发
• 定时器执行完成后可以删除dataset里的ID，保持数据干净

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