Is there a way to find out if there are active timers ?

I have n-timers with different durations, for example:

Timer 1 -> 2-sec

Timer 2 -> 8-sec

..

...

Timer n -> n-sec

I need to know when all timers are finished

HTML

<div id="time-out-1">
   Time out 1:<span></span>
</div>

<div id="time-out-2">
   Time out 2:<span></span>
</div>

<button>
   Are all timers finished ?
</button>

JS

setTimeout(function () {
        $("#time-out-1 span").text("Finished !");
 },2000);


  setTimeout(function () {
        $("#time-out-2 span").text("Finished !");
 },8000);

 $('button').click(function(){
        // if all timers are finished
        // do something
 });

Jsfidle

Note: I need solution for this particular example because in my project there are n numbers of js files which might have timers that are declared like this example

Is there a way to find out if there are active timers ?

I have n-timers with different durations, for example:

Timer 1 -> 2-sec

Timer 2 -> 8-sec

..

...

Timer n -> n-sec

I need to know when all timers are finished

HTML

<div id="time-out-1">
   Time out 1:<span></span>
</div>

<div id="time-out-2">
   Time out 2:<span></span>
</div>

<button>
   Are all timers finished ?
</button>

JS

setTimeout(function () {
        $("#time-out-1 span").text("Finished !");
 },2000);


  setTimeout(function () {
        $("#time-out-2 span").text("Finished !");
 },8000);

 $('button').click(function(){
        // if all timers are finished
        // do something
 });

Jsfidle

Note: I need solution for this particular example because in my project there are n numbers of js files which might have timers that are declared like this example

• javascript
• jquery
• settimeout

• 2 I don't believe it's possible to determine if a timer is active from the reference to it, as the reference is just an integer with no properties. If you can provide details of what you're looking to achieve we may be able to suggest an alternative. – Rory McCrossan Commented Dec 15, 2015 at 16:37
• If your timeouts aren't staggered/delayed, wouldn't you just need to check to see if the longest timeout has occurred? In which case, you could merely toggle a Boolean value based on that. – jeffjenx Commented Dec 15, 2015 at 16:40
• 1 @Quantastical Could give unexpected result ejohn.org/blog/how-javascript-timers-work – A. Wolff Commented Dec 15, 2015 at 16:42
• Then if these timers are set from third party codes, you would have to override setTimeout()/clearTimeout() methods to keep track of any running timer, nothing you would really want to do imho... It really looks like a XY problem but i could be wrong – A. Wolff Commented Dec 15, 2015 at 16:45

4 Answers 4

Here's how I'd do it, create a wrapper around the native functions

(function(w) {
     var active = {};

     var _setTimeout = w.setTimeout;
     var _clearTimeout = w.clearTimeout;

     w.setTimeout = function(fn, delay) {
         var id = _setTimeout(function() {
             fn();
             delete active[id];
         }, delay);
         active[id] = true;
         return id;
     }

     w.clearTimeout = function(id) {
         delete active[id];
         _clearTimeout(id);
     }

     w.activeTimers = function() {
         return Object.keys(active).length > 0;
     }
})(window);

Then use it like

setTimeout(function () {
    $("#time-out-1 span").text("Finished !");
},2000);


setTimeout(function () {
    $("#time-out-2 span").text("Finished !");
},8000);

$('button').click(function(){
    if ( window.activeTimers() ) {
        // still something going on
    } else {
        // all done !
    }
});

FIDDLE

May be this will help you.

//if n Timer then take count n
var count = 2;

setTimeout(function () {
        count--;
        $("#time-out-1 span").text("Finished !");
 },2000);


  setTimeout(function () {
        count--;
        $("#time-out-2 span").text("Finished !");
 },8000);

 $('button').click(function(){
        //Check if all Timers are finished
        if(count==0)
        //finished
 });

You can always add control variables.

var timer1_active = true,
    timer2_active = true;
setTimeout(function () {
    timer1_active = false;
    $("#time-out-1 span").text("Finished !");
},2000);


setTimeout(function () {
    timer2_active = false;
    $("#time-out-2 span").text("Finished !");
},8000);

$('button').click(function(){
    //Check if all Timers are finished
    var finished = !timer1_active && !timer2_active;
});

I would do this with promises that jQuery offers. Consider this jsfiddle: https://jsfiddle.net/734y1oqy/

First we create an array for the promise objects:

var timers = [];

Then we create the promise objects themselves:

var timer1promise = $.Deferred();
var timer2promise = $.Deferred();
var timer3promise = $.Deferred();

Push them to array:

timers.push(timer1promise);
timers.push(timer2promise);
timers.push(timer3promise);

Create timers like normal, but have each timer resolve the corresponding promise object:

var timer1 = setTimeout(function() { console.log('timer 1 finished'); timer1promise.resolve(); }, 1000);
var timer2 = setTimeout(function() { console.log('timer 2 finished'); timer2promise.resolve(); }, 2000);
var timer3 = setTimeout(function() { console.log('timer 3 finished'); timer3promise.resolve(); }, 3000);

Create a thing that "watches" when every promise in the promise array is resolved:

$.when.apply($, timers).then(function()
{
    console.log('All timers done!');
});

More info: https://api.jquery.com/category/deferred-object/