javascript - 禁用和启用带有计数器和过渡效果的点击事件

Question

我的网页中有以下代码行 - demo/example .

HTML:

<button class="wrong-answer" onclick="showResult(this)">42</button>
<button class="right-answer" onclick="showResult(this)">43</button>

<p id="answer" class="answer-display-hidden">answer</p>

<div class="incorrect">
    <span>Incorrect:</span>
    <p>0</p>
</div>

<div class="correct">
    <span>Correct:</span>
    <p>0</p>
</div>

CSS:

.answer-display-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

.answer-display-hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.incorrect, .correct {float: left; padding-right: 20px}

JS:

var incorrectCalls = 0;
var correctCalls = 0;

function showResult(b) {
  var res = document.getElementById('answer');

  if (b.classList.contains('right-answer')) {
    res.innerHTML = '<span class="right">right</span>';

    correctCalls++;
        var cor = $('.correct > p:first');
        cor[0].innerHTML = correctCalls;
  } 

  else {
    res.innerHTML = '<span class="wrong">wrong</span>';

    incorrectCalls++;
    var incor = $('.incorrect > p:first');
    incor[0].innerHTML = incorrectCalls;
  }

  res.classList.remove("answer-display-hidden");
  res.classList.add("answer-display-visible");

  setTimeout(function() {
        res.classList.add("answer-display-hidden");
  }, 2000);
}

如何在文本的淡入和等待效果期间停用 right-answer 计数器，然后再重新激活？这是为了让用户无法操纵计数器(在显示文本之前快速单击按钮)。

Answer 1

您可以在单击按钮时使用 setTimeout 函数。

Live Demo

代码块:

function showResult(b) {
 .
 .
 .
  $(".right-answer").prop("disabled", true);
  $(".wrong-answer").prop("disabled", true);
  setTimeout(function() {
    $(".right-answer").prop("disabled", false);
    $(".wrong-answer").prop("disabled", false);
  }, 2600);
}