Verifica se c'è un timeout attivo in Javascript

Question

C'è un modo per scoprire se ci sono timer attivi?

ho n-time con durate diverse, ad esempio:

Timer 1 -> 2-sec 

Timer 2 -> 8-sec 

.. 

... 

Timer n -> n-sec 

Ho bisogno di sapere quando tutti i timer sono finiti

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

Nota: ho bisogno di soluzione per questo particolare esempio, perché nel mio progetto ci sono n numero di file js che potrebbero avere i timer che vengono dichiarati come questo esempio

Answer 1

Ecco come I' d faielo, crea un wrapper attorno alle funzioni native

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

quindi utilizzarlo come

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

Answer 2

Può essere questo ti aiuterò.

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

Answer 3

È sempre possibile aggiungere variabili di controllo.

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

Answer 4

Lo farei con promises offerto da jQuery. Considerate questo jsfiddle: https://jsfiddle.net/734y1oqy/

Per prima cosa creare una matrice per la promise objects:

var timers = []; 

Poi creiamo il promise objects stessi:

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

li spingono a matrice:

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

Crea timer come quelli normali, ma ciascuno di essi Timer risolvere l'oggetto promessa corrispondente:

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

Creare una cosa che "orologi", quando ogni promessa nella matrice promessa è risolto:

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

Maggiori informazioni: https://api.jquery.com/category/deferred-object/