jquery start multiple timers after each other

Question

I have this code

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);
}

I have + button to let the user add multiple timers like this

<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>

after that I want the user to click a button to start the timers but one at a time after the first timer finished the second one starts and etc

Thank you

Answer 1

Here's the first way that came to mind that didn't involve much change to your existing startTimer() function - basically I just added a callback argument, and then another function to start the next timer. (This code could be tidied up quite a bit, but it should give you some ideas...)

$("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>