javascript - 检查Javascript中是否存在事件超时

Question

有没有办法查明是否有事件的定时器？

我有 n 个持续时间不同的计时器，例如:

Timer 1 -> 2-sec

Timer 2 -> 8-sec

..

...

Timer n -> n-sec

我需要知道所有计时器何时结束

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

注意:我需要这个特定示例的解决方案，因为在我的项目中有 n 个 js 文件，这些文件可能具有像这个示例一样声明的计时器

Answer 1

这是我的做法，围绕原生函数创建一个包装器

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

然后像这样使用它

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