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

我在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;
    }

我看了看那个jQuery定时器插件，我不太喜欢它的代码。对于一项简单的任务来说，它似乎没有必要复杂。像这样的代码不能激发信心:

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>

下面是代码。

相关内容

最新更新

热门标签：