How to know if a timer is cleared or timed out in javascript?
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 pos开发者_StackOverflow中文版itive integer always returns true.
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.)
assign null
to the timer after the clearTimeout(timer)
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);
Here is something that I use for timer events! Hope this helps.
var toggleTimeOut = (function () {
var _timeout;
return function (clear_timeout) {
if(!clear_timeout)
{
_timeout = setTimeout( function () {/*DO YOUR STUFF*/}, 5000);
}
else
{
if(typeof _timeout != typeof undefined && _timeout != 0)
{
clearTimeout(_timeout);
_timeout= 0;
}
}
}
})();
I avoid using flags in JS in general but this is a case where it makes sense and keeps things nice and simple. The idea is you set a flag once your timer has fired and then you can examine that elsewhere in code.
let fired = false;
// Set your timeout to do future work...
const timeout = window.setTimeout(() => {
fired = true;
// ...
}, 3000);
// Test it
const testInterval = window.setInterval(() => {
console.log(`Timer has ${fired ? ' ' : 'not '}fired`);
fired && window.clearInterval(testInterval);
}, 500);
精彩评论