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

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

javascript jquery browser

Javascript 更改浏览器选项卡时，JQuery进度条暂停,javascript,jquery,browser,Javascript,Jquery,Browser,我正在尝试使用javascript在html页面上显示进度条。然而，当包含代码的浏览器选项卡处于非活动状态时，进度条将停止更新，当选项卡再次处于活动状态时恢复当窗口处于非活动状态时，如何防止浏览器停止/暂停javascript代码的执行虽然可能与此无关，但代码如下： Object.progressBar = function(){ $( "#question-progress-bar" ).progressbar({ value: false, complete: fun

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

Object.progressBar=函数（）{
$（“#问题进度条”）.progressbar({
值：false，
完成：函数（事件，ui）{…}
});
var秒=15.0，
进度条=$（“#问题进度条”），
progressbarValue=progressbar.find（“.ui progressbar值”）；
progressbarValue.css({
“背景”：“#c5b100”，
“不透明度”：“0.8”
})
var int=setInterval（函数（）{
变量百分比=（15秒）/15*100；
秒=秒-0.1；
progressbar.progressbar（“选项”{
值：Math.ceil（百分比）
});
$（“#问题进度条秒数”）.html（（秒数）.toFixed（1）+“s”）；
如果（秒而不是使用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>


函数go（）
{
var pb=新的进度条（5，“目标”）；
}
window.onload=go；
函数进度条（l，t）
{
var start=Date.now（）；
变量长度=l*1000；
var targ=document.getElementById（t）；
var it=window.setInterval（interval，10）；
函数间隔（）
{
var p=100*（Date.now（）-start）/长度；
如果（p>100）
{
p=100；
窗口。清除间隔（it）；
alert（“DONE”）；//或者在此处发送AJAX请求以通知服务器
}
目标值=（数学四舍五入（p）+“%”；
}
}

我在这里创建了一个示例对象，它在实例化时立即开始倒计时，并在完成时调用警报和终止间隔计时器。或者，在完成时可以执行AJAX调用或任何其他类型的调用
需要注意的是，如果浏览器同时停止Javascript，这不会完成调用。但是，如果在此期间有足够的时间，它会在选项卡重新获得焦点后立即完成调用。网站无法从脚本方面改变这种浏览器行为
希望这有帮助！
，如果本质上不是重复的话。你在哪个浏览器中看到了这一点？你不能。现代浏览器都会在页面不活动时降低间隔计时器的速度，并且它们会无条件地这样做。你考虑过设置一个间隔来检查页面加载后的时间吗？这样间隔计时器的频率就降低了没关系。页面加载后经过的时间不是我的应用程序的选项。我可以在计时器启动和“正确”时以毫秒为单位存储本地时间进度条，但我需要在时间到的时候向服务器发送一些东西。我想我理解你的意思，我会在下面更新我的答案以反映这一点。谢谢你的回复。我想要的是阻止浏览器停止javascript，这是不可能的。是的，这是大多数浏览器的硬编码功能。some将继续在后台运行代码，有些则不会。例如，Chrome将完成此调用；iOS 5.0 Safari将不会。不过，这是最接近的一次调用，因为它至少会尽快执行，而原始解决方案将从它停止的地方恢复。按照您建议的方式实现进度条后ed我注意到当标签不对焦时，浏览器不会中断javascript代码。太棒了！虽然你应该跨多个浏览器检查。我90%确定大多数移动浏览器都会停止它，但我想有时候你必须接受你能得到的。如果你觉得满意，一定要选择这个答案！