Question

有没有办法找出是否有活跃的计时器？

我有持续时间不同的n次计时器，例如：

我需要知道所有计时器何时完成

HTML

Timer 1 -> 2-sec

Timer 2 -> 8-sec

..

...

Timer n -> n-sec

JS

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

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

Answer 2

可能会对你有帮助。

//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

您始终可以添加控制变量。

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

我会用jQuery提供的promises来做这件事。考虑一下这个jsfiddle：https://jsfiddle.net/734y1oqy/

首先我们为promise objects创建一个数组：

var timers = [];

然后我们自己创建promise objects：

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

将它们推送到数组：

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

像普通计时器一样创建计时器，但让每个计时器解析相应的promise对象：

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

在promise数组中的每个promise都被解析时，创建一个“监视”的东西：

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

更多信息：https://api.jquery.com/category/deferred-object/

检查Javascript中是否存在活动超时

4 个答案: