How to know if a timer is cleared or timed out in javascript?

Question

Ok, really simple question. I'm taking a crash course in javascript.

If I use timer = setTimeout(..., 500) to set a timer, and then clearTimeout(timer) to clear the timer, the integer value of timer doesn't change, so my question is how to know if a timer is timed out or cleared?

I want to use if (timer) {...} , but obviously a positive integer always returns true.

Answer 1

If you clear the timeout the callback won't be executed. So if the callback is executed it means that 500ms have passed since you've set the timeout.

For example:

var timer = setTimeout(function() {
    alert('you will never see this alert');
}, 500);
clearTimeout(timer);

Answer 2

assign null to the timer after the clearTimeout(timer)

Answer 3

If you're looking for something more formal, you could build javascript class that encapsulates the setTimeout/clearTimeout functionality.

Such a class might look something like this:

/** class Timer **/
var Timer = function(delayMs, callbackFunc) {
    this.delayMs = delayMs;
    this.callbackFunc = callbackFunc;
    this.timerState = 'new';
}
Timer.prototype.start = function() {
    if( this.tmr ) return;

    var self = this;
    this.timerState = 'running';
    this.tmr = setTimeout(function() { self._handleTmr(); }, this.delayMs);
}
Timer.prototype.cancel = function() {
    if( ! this.tmr ) return;

    clearTimeout(this.tmr);
    this.tmr = null;
    this.timerState = 'canceled';
}
Timer.prototype._handleTmr = function() {
    this.tmr = null;
    this.timerState = 'completed';
    this.callbackFunc();
}

I've also included a timerState attribute that would let you easily determine whether the timer was "completed" or "canceled".

You would use it like this:

var t = new Timer(500, function() {
    alert('timer completed');
});
t.start();

// do whatever...

// now cancel the timer if it hasn't completed yet.
t.cancel();

// maybe you do some other stuff...
// then check the timerState, and act accordingly.
//
if( t.timerState == 'canceled' ) {
   alert("the timer was canceled!");
} else {
   alert("the timer completed uneventfully.");
}

You can extend the same basic idea to include additional functionality if you need it (eg. repeating timer, start/stop/resume, etc.)