如何使用 setTimeout 和 clearTimeout 实现计时器

Question

我遍历我曾经显示的问题/答案数组。

 const data = [ { question: "xxx", answer: "xxxx." }, { question: "xxx", answer: "xxx?" }, // etc, etc...

然后我创建一个 for 循环来创建文章元素、按钮、h3 和段落。 然后它将为每个显示“+”的按钮提供文本内容，每次我单击该按钮时，它都会显示答案，当我单击返回时，它会隐藏。

我正在寻找一种实现 setTimout 的方法，该方法设置一个计时器以显示答案，然后在时间到时取消 clearTimeout。

 const main = document.querySelector('main'); data.forEach(trivia => { const article = document.createElement('article'); const button = document.createElement('button'); button.type = 'button'; button.textContent = '+'; button.addEventListener('click', () => { 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); });

Answer 1

在您的情况下，在侦听器上添加setTimeout()将是一个好地方。

button.addEventListener('click', () => {
  button.textContent = p.classList.contains('hidden') ? '-' : '+';
  p.classList.toggle('hidden');
  const timer = setTimeout(() => {
    // code for hiding the element
    clearTimeout(timer);
  }, 5000); // 5 seconds
  if (p.classList.contains('hidden')) {
    clearTimeout(timer);
  }
});