SetInterval 60秒倒计时问题jQuery

SetInterval 60 second countdown issue jQuery

本文关键字：jQuery 问题 倒计时 60秒 SetInterval      更新时间：2024-04-26

我试图在单击开始按钮后倒计时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);
  }

您有几个问题：

  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/

相关文章：