Question

以下是我用于一个计时器的编码：

var sec = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }       
function setTime()
{
    document.getElementById("seconds0").innerHTML=pad(++sec%60);
    document.getElementById("minutes0").innerHTML=pad(parseInt(sec/60,10));
}

var timer = setInterval(setTime, 1000);

如果我有两个计时器，我这样写：

var sec = 0;
var sec1 = 0;
function pad ( val ) { return val > 9 ? val : "0" + val; }       
function setTime()
{
    document.getElementById("seconds0").innerHTML=pad(++sec%60);
    document.getElementById("minutes0").innerHTML=pad(parseInt(sec/60,10));
}
function setTime1()
{
    document.getElementById("seconds1").innerHTML=pad(++sec1%60);
    document.getElementById("minutes1").innerHTML=pad(parseInt(sec1/60,10));
}

var timer = setInterval(setTime, 1000);
var timer1 = setInterval(setTime1, 1000);

实际上我使用的计时器是显示人的等待时间。人数是一个未知变量。意味着它可以是1 - 100.因此，一个人是一个计时器。以下是我写的功能。

showWait = function(){
    var html = "";
    for (var i = 0; i < total; i++) 
    {                 
            html += '<div id="numbers" class="col-sm-3 col-xs-6">'+i+'</div>';
            html += '<div id="qtime" class="col-sm-3 col-xs-6"></span><div><span class="glyphicon glyphicon-time"></span> Waiting</div><div id="waittime"><label id="minutes'+i+'">00</label>:<label id="seconds'+i+'">00</label></div></div>';
            html += '</div>';
    }
$('#waitnumber').html(html);
}

所以，我不认为创建更多计时器的方法是一遍又一遍地重复相同的功能，对吧？如果有100个人就有100个计时器，对吧？有没有更简单的方法来管理多个计时器？

Answer 1

我想每个时间间隔都有1000毫秒的等待时间，所以你不需要多个定时器只需一个，在这个定时器里做你需要的每个人

var sec = [time0, time1, time2 ....];
function pad ( val ) { return val > 9 ? val : "0" + val; }       
function setTime()
{
    for(person = 0; person < numberOfPeople; person++)
    {
        document.getElementById("seconds" + person).innerHTML=pad(++sec[person]%60);
        document.getElementById("minutes" + person).innerHTML=pad(parseInt(sec[person]/60,10));
    }
}
var timer = setInterval(setTime, 1000);

Answer 2

如果您的每个人的时间间隔将被修复，那么我建议您只运行一个1000毫秒的计时器，并为每个人定义某些变量，即类似

var persons = [
    {id : 0, min : 0, sec : 0, othercounts: 0},
    {id : 1, min : 0, sec : 0, othercounts: 0}
]

并且在执行计时器功能时，只需遍历数组或（您认为合适的任何数据结构）并为每个人增加时间计数器变量并刷新dom。

你的计时器功能如下：

function setTime(){
    persons.forEach(function(p){
    p.min ++; 
    // your logic
    document.getElementById("seconds"+ e.id).innerHTML=pad(++sec%60);
    document.getElementById("minutes" + e.id).innerHTML=pad(parseInt(sec/60,10));
    });
}

并仅在文档加载事件或自定义事件

上注册一次

var timer = setInterval(setTime, 1000);

新人到来后，只需将人物对象推入人物阵列即可。

这只是一种方式，通过在循环结束时只渲染一次html，可以有更好的解决方案。

如何在javascript中管理多个计时器？

2 个答案: