实现每10秒可重复投票的JS排行榜功能问题求助

问题原因分析 #

当前问题核心出在两点：

1. 按钮状态未完全恢复：投票后你将按钮的vote-btn类替换成了voted，但重置时仅启用按钮、移除no-cursor类，未把按钮类改回vote-btn，也没恢复原始文本。而原voting()函数只给.vote-btn绑定事件，导致已变为voted状态的按钮无法重新绑定点击事件，自然无法再次投票。
2. 定时器重复创建：disableVoting函数里给每个按钮都调用setInterval，会生成多个重复定时器，既浪费资源又可能引发逻辑混乱。

解决方案 #

1. 改用事件委托绑定点击事件

避免每次重置都重新绑定事件，直接给排行榜父容器绑定一次事件，无论按钮状态如何变化都能触发：

// 页面加载完成后初始化事件委托
document.addEventListener('DOMContentLoaded', () => {
  // 替换成你的排行榜父容器选择器，比如.ranking-list
  document.querySelector('.ranking-container').addEventListener('click', (e) => {
    const button = e.target.closest('.vote-btn');
    if (!button || button.disabled) return;

    // 执行投票逻辑
    button.innerHTML = 'thanks for voting!';
    button.classList.replace('vote-btn', 'voted');
    const targetData = button.dataset.btnId;

    // 通用票数更新逻辑（替代原逐个玩家判断的冗余写法）
    const countEl = document.getElementById(targetData);
    countEl.innerText = parseInt(countEl.innerText) + 1;

    // 禁用投票并启动重置定时器
    disableVoting();
  });
});

2. 修复禁用与重置函数

• 禁用函数：仅创建一次定时器，避免重复触发
• 重置函数：完全恢复按钮的初始状态（类、文本、可点击状态）

let resetTimer = null; // 保存定时器ID，防止重复创建

function disableVoting() {
  // 选中所有投票相关按钮（包含vote-btn和voted两种状态）
  document.querySelectorAll('.vote-btn, .voted').forEach(button => {
    button.disabled = true;
    button.classList.add('no-cursor');
  });

  // 清除已有定时器，避免重复触发
  if (resetTimer) clearTimeout(resetTimer);
  // 10秒后执行重置操作
  resetTimer = setTimeout(resetVoting, 10000);
}

function resetVoting() {
  document.querySelectorAll('.voted').forEach(button => {
    button.disabled = false;
    button.classList.remove('no-cursor');
    // 恢复按钮原始状态
    button.classList.replace('voted', 'vote-btn');
    button.innerHTML = 'Vote'; // 替换成你按钮的原始文本
  });
  resetTimer = null; // 清空定时器ID
}

额外优化建议 #

• 用setTimeout代替setInterval：因为仅需在投票后10秒重置一次，无需重复执行，setTimeout更贴合需求，避免定时器堆积。
• 通用票数更新逻辑：上述代码采用通用方式更新票数，无需逐个判断玩家ID，减少冗余代码，后续新增玩家也无需修改核心逻辑。

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