Question

这是我的代码：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>

var myseconds = 20;
var mycolor = 'rgba(255, 100, 0, 0.8)';

//alert('You will have '+Math.floor(myseconds/60)+' minutes and '+myseconds%60+' seconds to finish. Press “OK” to begin.');

$(function(){
$('div#pie_to_be').pietimer({
seconds: myseconds,
color: mycolor
},
function(){ $('#caspioform').submit(); });});
(function($){jQuery.fn.pietimer=function(options,callback){var settings={'seconds':10,'color':'rgba(255, 255, 255, 0.8)','height':this.height(),'width':this.width()};if(options){$.extend(settings,options);}this.html('<canvas id="pie_timer" width="'+settings.height+'" height="'+settings.height+'">'+settings.seconds+'</canvas>');var val=360;interval=setInterval(timer,40);function timer(){var canvas=document.getElementById('pie_timer');if(canvas.getContext){val-=(360/settings.seconds)/24;if(val<=0){clearInterval(interval);canvas.width=canvas.width;if(typeof callback=='function'){callback.call();}}else{canvas.width=canvas.width;var ctx=canvas.getContext('2d');var canvas_size=[canvas.width,canvas.height];var radius=Math.min(canvas_size[0],canvas_size[1])/2;var center=[canvas_size[0]/2,canvas_size[1]/2];ctx.beginPath();ctx.moveTo(center[0],center[1]);var start=(3*Math.PI)/2;ctx.arc(center[0],center[1],radius,start-val*(Math.PI/180),start,false);ctx.closePath();ctx.fillStyle=settings.color;ctx.fill();}}}return this;};})(jQuery);
</script>

这是一个通过页面加载开始运行的饼图计时器。但是当我切换浏览器标签时，它会暂停。然后当我回到那个标签时，它会从停止的地方恢复。请告诉我如何让它在后台运行（即使用户看不到标签页）。

Answer 1

不要依赖setInterval计时器是否一致。即使在前景中，它也会有所不同。相反，当setInterval触发时，读取实际时间并使用它来计算新位置应该是什么。这样，计时器似乎在后台运行，即使它不是。

Answer 2

尝试更新jQuery。更新的版本有与间隔相关的修复。

如何在浏览器选项卡未激活时保持javascript运行

2 个答案: