如何使用setTimeout和clearTimeout实现问答展示显隐计时器

实现方案 #

核心逻辑

• 利用forEach的块级作用域为每个问答项单独存储定时器ID，隔离不同项的定时任务
• 初始化自动揭晓定时器，到达设定时间后自动展示答案
• 按钮点击事件中加入清除定时器逻辑，用户手动操作后直接取消对应项的自动揭晓任务，避免状态冲突

完整实现代码

const main = document.querySelector('main');
// 自定义自动揭晓等待时长，单位为毫秒，示例为5秒后自动揭晓
const AUTO_REVEAL_DELAY = 5000;

data.forEach(trivia => {
  const article = document.createElement('article');
  // 存储当前问答项的定时器ID，每个循环项独立存储互不干扰
  let revealTimer = null;

  const button = document.createElement('button');
  button.type = 'button';
  button.textContent = '+';
  button.addEventListener('click', () => {
    // 手动点击时直接清除当前项的自动揭晓定时器
    if (revealTimer) {
      clearTimeout(revealTimer);
      revealTimer = null;
    }
    button.textContent = p.classList.contains('hidden') ? '-' : '+';
    p.classList.toggle('hidden');
  });
  article.appendChild(button);

  const h3 = document.createElement('h3');
  h3.textContent = trivia.question;
  article.appendChild(h3);

  const p = document.createElement('p');
  p.textContent = trivia.answer;
  p.classList.add('hidden');
  article.appendChild(p);

  main.appendChild(article);

  // 初始化当前项的自动揭晓定时器
  revealTimer = setTimeout(() => {
    p.classList.remove('hidden');
    button.textContent = '-';
    revealTimer = null;
  }, AUTO_REVEAL_DELAY);
});

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