2

我正在尝试使用 javascript 在 html 页面上显示进度条。但是，当包含代码的浏览器选项卡变为非活动状态时，进度条将停止更新，并在选项卡再次活动时恢复。

当窗口处于非活动状态时，如何防止浏览器停止/暂停执行 javascript 代码？

虽然它可能无关紧要，但这里是代码：

Object.progressBar = function(){
$( "#question-progress-bar" ).progressbar({
    value: false,
    complete: function(event, ui) { ... }
});

var seconds = 15.0,
progressbar = $("#question-progress-bar"),
progressbarValue = progressbar.find(".ui-progressbar-value");

progressbarValue.css({
    "background": '#c5b100',
    "opacity" : '0.8'
})

var int = setInterval(function() {
    var percent = (15-seconds)/15*100; 
    seconds=seconds-0.1;
    progressbar.progressbar( "option", {
        value: Math.ceil(percent)
    });

    $("#question-progress-bar-seconds").html((seconds).toFixed(1)+"s");

    if (seconds <= 0.1) {
        clearInterval(int);
    }
}, 100);
}
4

1 回答 1

1

而不是使用setInterval并假设调用之间已经过去了一定的时间（即使它在前面，setInterval已经达到或未达到准确度），而是使用Date对象来获取条形图开始的时间，并将其与每次迭代的当前时间进行比较。

<html>
    <head>
        <script>
            function go()
            {
                var pb = new ProgressBar(5, "targ");
            }

            window.onload = go;

            function ProgressBar(l, t)
            {
                var start = Date.now();
                var length = l * 1000;
                var targ = document.getElementById(t);

                var it = window.setInterval(interval, 10);

                function interval()
                {
                    var p = 100 * (Date.now() - start) / length;

                    if(p > 100)
                    {
                        p = 100;

                        window.clearInterval(it);

                        alert("DONE"); // alternatively send an AJAX request here to alert the server
                    }

                    targ.value = (Math.round(p) + "%");
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="targ" />
    </body>
</html>

我在这里制作了一个示例对象，它在实例化时立即开始倒计时，并在完成时调用警报并终止间隔计时器。或者，可以在完成后进行 AJAX 调用或任何其他类型的调用。

应该注意的是，如果浏览器一起停止 Javascript，这将不会完成调用。但是，如果在此期间经过了足够的时间，它将在选项卡再次获得焦点后立即完成。网站无法从脚本端改变这种浏览器行为。

希望有帮助！

于 2013-04-22T15:50:04.657 回答