javascript - SetTimeout 在警报时暂停

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 警报，有时也可以是验证摘要警报。当此警报出现时，计时器暂停，当我单击“确定”时，计时器再次开始运行。我不希望这种停顿发生。有什么办法解决这个问题吗？请帮助我。

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；在您的情况下，这可能是可接受的，也可能是 Not Acceptable ，因为它会使浏览器经常检查计时器，并且可能会干扰其他定时任务(例如动画)。您可以将间隔调整得更大(<= 1000)，但是间隔越大，计时器在暂停后“ catch ”之前报告错误结果的机会就越大...