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

您有几个问题：

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

代码：

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/

SetInterval 60秒倒计时问题jQuery

1 个答案: