Question

我在Chrome和Mozilla中遇到此问题，而IE工作正常。当我最小化浏览器或打开新选项卡并在该选项卡上工作一段时间时，计时器暂停，但如果Web应用程序再次处于焦点，则会再次恢复。我知道这个时间的不同，例如大约一分钟后，当我返回Web应用程序时，只会经过一秒左右。我不知道是什么导致了这个问题。

以下是我使用的jQuery代码段，可以从这里下载计时器http://code.google.com/p/jquery-timer/

 var countdownTimer, countdownCurrent;
    $(document).ready(function () {
        countdownCurrent = $('#ctl00_MainContent_example2submit').val() * 100;
        countdownTimer = $.timer(function () {
            var min = parseInt(countdownCurrent / 6000);
            var sec = parseInt(countdownCurrent / 100) - (min * 60);
            var micro = pad(countdownCurrent - (sec * 100) - (min * 6000), 2);
            var output = "00"; if (min > 0) { output = pad(min, 2); }
            $('.countdowntime').html(output + ":" + pad(sec, 2) + ":" + micro);
            if (countdownCurrent == 0) {
                $('#ctl00_MainContent_btnNext').click();

            } else {
                countdownCurrent -= 7;
                if (countdownCurrent < 0) { countdownCurrent = 0; }
            }
        }, 70, true);


        $('#example2submit').bind('keyup', function (e) { if (e.keyCode == 13) { countdownReset(); } });

    });

    function CheckIfOptionSelected() {

        var vFlag = true;
        var radioButton1 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_0'];
        var radioButton2 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_1'];
        var radioButton3 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_2'];
        var radioButton4 = document.forms[0].elements['ctl00_MainContent_rdBtnListOptions_3'];

        if (radioButton1.checked == false && radioButton2.checked == false && radioButton3.checked == false && radioButton4.checked == false && countdownCurrent > 0) {
            vFlag = false;
        }

        else {
            countdownReset();
            vFlag = true;
        }
        return vFlag;
    }

    function countdownReset() {
        var newCount = parseInt($('#ctl00_MainContent_example2submit').val()) * 100;
        if (newCount > 0) { countdownCurrent = newCount; }
        countdownTimer.stop().once();
                }

    // Padding function
    function pad(number, length) {
        var str = '' + number;
        while (str.length < length) { str = '0' + str; }
        return str;
    }

Answer 1

我看了一下jQuery timer插件，我不太喜欢这些代码。对于简单的任务来说，似乎不必要地复杂化。像这样的代码并没有激发信心：

if(typeof func == 'object') {
    var paramList = ['autostart', 'time'];
    for(var arg in paramList) {if(func[paramList[arg]] != undefined) {eval(paramList[arg] + " = func[paramList[arg]]");}};
    func = func.action;
}

重新格式化了一些急需的换行符和评论：

if(typeof func == 'object') {
    var paramList = ['autostart', 'time'];
    // Never use for..in to iterate over an array
    for(var arg in paramList) {
        if(func[paramList[arg]] != undefined) {
            // What does this eval code do and why?
            eval(paramList[arg] + " = func[paramList[arg]]");
        }
    };
    func = func.action;
}

如果您需要一个有效的计时器，为什么不采取更简单的方法并直接使用浏览器的setInterval()或setTimeout()？如果您需要知道已经过了多长时间，请使用+new Date以毫秒为单位获取当前时间并根据需要减去。

这是一个测试页面，显示自页面加载以来的秒数。它是纯粹的原生HTML和JavaScript代码，我认为它应该适用于每个浏览器。特别是，当IE最小化时，它按预期工作。您可以将此作为简单可靠解决方案的起点：

<!DOCTYPE html>

<html>
<head>
    <title>Time Test</title>
</head>
<body>

    <code>
        This page has been open for
        <span id="timeOpen">0</span>
        seconds
    </code>

    <script>
        var timeStart = +new Date;
        setInterval( function() {
            var timeNow = +new Date;
            var secondsOpen = ( timeNow - timeStart ) / 1000;
            document.getElementById('timeOpen').innerHTML =
                Math.floor( secondsOpen );
        }, 250 );
    </script>

</body>
</html>

这是fiddle中的代码。

浏览器失焦时jQuery计时器暂停

1 个答案: