Kiểm tra xem có thời gian chờ hoạt động trong Javascript

Question

Có cách nào để tìm hiểu xem có bộ hẹn giờ hoạt động không?

Tôi có n-giờ với khoảng thời gian khác nhau, ví dụ:

Timer 1 -> 2-sec 

Timer 2 -> 8-sec 

.. 

... 

Timer n -> n-sec 

Tôi cần phải biết khi tất cả giờ đã kết thúc

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

Lưu ý: Tôi cần giải pháp cho ví dụ cụ thể này vì trong dự án của tôi có n số của file js mà có thể có tính giờ được công bố như ví dụ này

Answer 1

Đây là cách tôi' d làm điều đó, tạo một trình bao bọc xung quanh các hàm gốc

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

Sau đó, sử dụng nó như

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

Có thể này sẽ giúp bạn.

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

Bạn luôn có thể thêm các biến kiểm soát.

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

Tôi sẽ làm điều này với promises mà jQuery cung cấp. Cân nhắc jsfiddle này: https://jsfiddle.net/734y1oqy/

Đầu tiên chúng ta tạo một mảng cho promise objects:

var timers = []; 

Sau đó, chúng tôi tạo ra các promise objects mình:

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

Đẩy họ mảng:

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

Tạo bộ hẹn giờ như bình thường, nhưng có hẹn giờ giải quyết đối tượng hứa hẹn tương ứng:

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

Tạo một điều rằng "đồng hồ" khi mỗi lời hứa trong mảng hứa hẹn được giải quyết:

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

Thông tin thêm: https://api.jquery.com/category/deferred-object/