How to keep the javascript running when the browser tab is not active -

this code:

<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 have '+math.floor(myseconds/60)+' minutes , '+myseconds%60+' seconds finish. press “ok” 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> 

this pie timer starts running page load. when switch browser tab, pauses there. when come tab, resumes stopped. please tell me how can keep running in background (i.e. when tab not visible user).

don't rely on setinterval timer being consistent. vary, in foreground. instead, when setinterval fires, read actual time , use calculate new position should be. way, timer appear running in background, though isn't.