2013-07-17 73 views
0

這是我的代碼:如何保持的JavaScript運行時的瀏覽器選項卡未激活

<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> 

這是開始與頁面加載運行的餡餅定時器。但是當我切換瀏覽器選項卡時,它暫停在那裏。然後當我回到那個標籤時,它從停止的地方恢復。請告訴我如何讓它在後臺運行(即使該選項卡對用戶不可見)。

+0

嘗試使用'setInterval'。更多信息:http://www.w3schools.com/jsref/met_win_setinterval.asp – 2013-07-17 12:10:14

+1

@zlomerovic:請不要鏈接到[w3schools](http://www.w3fools.com/)。他們沒有權限和太多不準確的文檔 –

+0

@EliasVanOotegem - 對不起,但谷歌的事情,否則。它們是Google搜索結果中第一個搜索結果項:「setInterval」! – 2013-07-17 12:18:25

回答

2

不要依賴setInterval計時器是一致的。它會變化,即使在前景。相反,當setInterval觸發時,請閱讀實際時間並使用它計算新位置應該是什麼。這樣,計時器將顯示爲在後臺運行,即使它不是。

1

嘗試更新jQuery。更新的版本有與間隔相關的修復。

相關問題