Multiple timers with pauses

by jmjpro

HTML

<span id="remove-tile-timer"></span>
<span id="add-tile-timer"></span>

<button id="pause">Pause</button>

JavaScript

var removeTileSeconds = 10;
var addTileSeconds = 4;
var countdownIntervalSeconds = 1;

function Timer(callback, delaySeconds) {
    var timerId, start, remaining = delaySeconds * 1000;
    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };
    this.resume = function() {
        start = new Date();
        timerId = window.setTimeout(callback, remaining);
    };
}

function countdownTimer(selector, initialTime) {
    var currentValue;
    remainingTime = $( selector ).html();
    if( remainingTime > 0 ) {
        remainingTime--;
    }
    else {
        remainingTime = initialTime;
    }
    $( selector ).html(remainingTime);
    multiCountdownTimer.resume();
}

$( '#remove-tile-timer' ).html(removeTileSeconds);
$( '#add-tile-timer' ).html(addTileSeconds);

var multiCountdownTimer = new Timer(function() {
    countdownTimer( 'remove-tile-timer', removeTileSeconds );
    countdownTimer( 'add-tile-timer', addTileSeconds );
}, countdownIntervalSeconds);

//multiCountdownTimer.pause();
multiCountdownTimer.resume();