Question

我正在尝试使用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);
}

Answer 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，这将无法完成调用。然而，如果在过渡期间已经过了足够的时间，那么只要再次给予标签，将完成它。网站无法从脚本端改变这种浏览器行为。

希望有所帮助！

更改浏览器选项卡时，JQuery进度条会暂停

1 个答案: