0

This is my 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 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>

This is a pie timer which starts running with the page load. but when I switch the browser tab, the it pauses there. Then when I come back to that tab, it resumes from where it stopped. Please tell me how can I keep it running in the background (i.e. even when the tab is not visible to the user).

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
user2561597
  • 11
  • 2
  • 5
  • Try with `setInterval`. More on: http://www.w3schools.com/jsref/met_win_setinterval.asp –  Jul 17 '13 at 12:10
  • 1
    @zlomerovic: Please don't link to [w3schools](http://www.w3fools.com/). They have NO authority and too much inaccurate documentation – Elias Van Ootegem Jul 17 '13 at 12:15
  • @EliasVanOotegem - Sorry, but Google things otherwise. They are the first search result item for term: "setInterval" on Google! –  Jul 17 '13 at 12:18
  • 1
    @zlomerovic: yes, that's one of the things that w3fools talks about on their homepage, along with how w3schools has been asked by w3c to disavow any relation, which they refuse to do. w3schools have managed to work their way high in the search results, but that doesn't make it the best resource – Elias Van Ootegem Jul 17 '13 at 12:43
  • It's impossible, see the duplicate [How can I make setInterval also work when a tab is inactive in Chrome?](http://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome). Also have a look at [this answer](http://stackoverflow.com/a/13964806/1048572) – Bergi Jul 17 '13 at 13:04

2 Answers2

4

Don't rely on the setInterval timer being consistent. It will vary, even in foreground. Instead, when the setInterval fires, read the actual time and use that to calculate what the new position should be. That way, the timer will appear to be running in background, even though it isn't.

1

Try updating jQuery. More recent versions have fixes related to intervals.

Colin Pickard
  • 45,724
  • 13
  • 98
  • 148