javascript - jquery相继启动多个计时器

Question

我有这个代码

var duration = 60 * $(".duration").val(),
display = $(".timer");
startTimer(duration, display);

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.html(minutes + ":" + seconds);

        if (--timer < 0) {
            display.html("DONE!");
        }
    }, 1000);
}

我有+按钮可以让用户像这样添加多个计时器

<input type="text" class="duration" /> //Desired duration for first timer
<div class="timer"></div>

<input type="text" class="duration" /> //Desired duration for second timer
<div class="timer"></div>

<input type="text" class="duration" /> //Desired duration for third timer
<div class="timer"></div>

之后，我希望用户单击一个按钮来启动计时器，但在第一个计时器完成后一次启动第二个计时器，等等

谢谢

Answer 1

这是我想到的第一种方法，它不需要对现有的 startTimer() 函数进行太多更改 - 基本上我只是添加了一个回调参数，然后添加了另一个函数来启动下一个计时器。 (这段代码可以整理很多，但它应该给你一些想法......)

$("button").click(function() {

  var durations = $(".duration");
  var current = -1;

  durations.prop("disabled", true);
  $(this).prop("disabled", true);

  function startNext() {
    if (++current < durations.length)
      startTimer(durations.eq(current).val() * 60,
                 durations.eq(current).next(),
                 startNext);
    else {
      durations.prop("disabled", false);
      $("button").prop("disabled", false);
    }
  }

  startNext();

  function startTimer(duration, display, callback) {
    var timer = duration,
      minutes, seconds;
    var intId = setInterval(function() {
      minutes = parseInt(timer / 60, 10)
      seconds = parseInt(timer % 60, 10);

      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;

      display.html(minutes + ":" + seconds);

      if (--timer < 0) {
        display.html("DONE!");
        clearInterval(intId);
        callback();
      }
    }, 1000);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First:
<input type="text" class="duration" value="0.05" />
<div class="timer"></div>

Second:
<input type="text" class="duration" value="0.05" />
<div class="timer"></div>

Third:
<input type="text" class="duration" value="0.1" />
<div class="timer"></div>

<button>Start</button>