javascript - SetInterval 60秒倒计时问题jQuery

Question

单击开始按钮后我尝试倒计时 60 秒，在 0 时我不想只隐藏计数器，我希望它被重置。我遇到了两个问题:当我再次单击开始按钮时，它并没有重新开始。单击开始倒计时后，开始按钮不会被禁用。在倒计时时，当我按下开始按钮时，它会加速倒计时。 感谢任何帮助，这是代码:

function begin() {
    $('#begin').prop('disabled');
    myTimer = setInterval(function() {
      $('#timing').html(timing);
      if (timing === 0) {
        alert('Too late! Try again');
        clearInterval(myTimer);
        $('#timing').hide();
      }
      timing--;
    }, 1000);
  }

Answer 1

您有几个问题:

1. 您需要 .prop("disabled", true) 来禁用按钮。
2. 重启计时器时需要重置timing变量。
3. 您需要在计时器结束时启用该按钮，以便再次按下它。
4. 启动计时器时需要显示初始计数

代码:

var timing;
var myTimer;

function begin() {
    timing = 60;
    $('#timing').html(timing);
    $('#begin').prop('disabled', true);
    myTimer = setInterval(function() {
      --timing;
      $('#timing').html(timing);
      if (timing === 0) {
        alert('Too late! Try again');
        clearInterval(myTimer);
        $('#begin').prop('disabled', false);
      }
    }, 1000);
 }

工作演示(间隔时间较短，因此倒计时更快):http://jsfiddle.net/jfriend00/xxs7t0gd/