我正在尝试使用 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);
}
最佳答案
不要使用 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，这将不会完成调用。但是，如果在此期间经过了足够的时间，它将在选项卡再次获得焦点后立即完成它。网站无法从脚本端改变这种浏览器行为。
希望对您有所帮助!
关于javascript - 更改浏览器选项卡时，JQuery 进度条暂停，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16150782/