Question

我必须在我的网页上显示一个计时器。我这样做是使用Javascript SetTimeout方法。我的代码就像：

function UpdateTimer() {
        var hfTimer = $('#<%= hfTimer.ClientID %>');
        $('#spnTimer').html(GetElapsedTime(hfTimer.val()));
        hfTimer.val(parseInt(hfTimer.val(), 10) + 1);
        setTimeout(UpdateTimer, 1000);
    }

    function GetElapsedTime(seconds) {
        var sec_num = parseInt(seconds, 10);
        var hours = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);

        if (hours < 10) { hours = "0" + hours; }
        if (minutes < 10) { minutes = "0" + minutes; }
        if (seconds < 10) { seconds = "0" + seconds; }
        var time = hours + ':' + minutes + ':' + seconds;
        return time;
    }

定时器工作正常，直到弹出一些警告。警报可以是简单的jquery警报或某些时候验证摘要警报。当此警报出现时，计时器暂停，当我点击＆＃34;确定＆＃34;时，计时器再次开始运行。我不希望这种停顿发生。对此有什么解决方案吗？请帮帮我。

Answer 1

我认为你不能做任何事情来避免暂停，但你可以确保你的计时器在暂停后恢复。

var timer;

$(function () {
    $('#messThingsUp').click(function () {
        alert('timer stops...');
    });
    $('#datestamp').val(new Date().getTime());
    timer = setInterval(UpdateTimer, 200);
});

function UpdateTimer() {
    var hfTimer = $('#hfTimer');
    var before = $('#datestamp').val();
    var now = new Date().getTime();
    $('#spnTimer').html(GetElapsedTime(Math.floor(hfTimer.val())));
    hfTimer.val(parseFloat(hfTimer.val()) + ((now - before) / 1000));
    $('#datestamp').val(now);
}

function GetElapsedTime(seconds) {
    var sec_num = parseInt(seconds, 10);
    var hours = Math.floor(sec_num / 3600);
    var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
    seconds = sec_num - (hours * 3600) - (minutes * 60);

    if (hours < 10) {
        hours = "0" + hours;
    }
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    if (seconds < 10) {
        seconds = "0" + seconds;
    }
    var time = hours + ':' + minutes + ':' + seconds;
    return time;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="hidden" id="hfTimer" value=0 />
<input type="hidden" id="datestamp" />
<div id="spnTimer">00:00:00</div>
<br />
<input type="button" id="messThingsUp" value="press me" />

请注意，为了获得更好的分辨率，定时器间隔设置为200ms;在您的情况下，这可能会或可能不会被接受，因为它会使浏览器经常检查计时器，并且可能会干扰其他定时任务，如动画。您可以将间隔调整得更大（＆lt; = 1000），但是间隔越大，计时器在暂停后报告错误结果的可能性就越大，然后才能“赶上”......

SetTimeout在警报时暂停

1 个答案: