JavaScriptのコードが動作しなくなる

Question

1分ごとに回転するルーレットに関する問題 問題：Google Chromeや他のナビゲータでタブを切り替えるとスクリプトが実行されなくなり、ルーレットが停止します）スクリプトを動作させるために、再びタブにゲームこのため

//<![CDATA[ 
     var myRoll = { 
      nbr : [14, 1, 13, 2, 12, 3, 11, 0, 4, 10, 5, 9, 6, 8 ,7], 

      initRoll : function(){ 
       var Ccolor; 
       var nbrCtn = $(".nbr-ctn"); 
       for(j = 0; j < 6 ; j++){ 
        for(i = 0; i < this.nbr.length; i++){ 
         Ccolor = ""; 
         if(this.nbr[i] === 0){ 
          Ccolor = "nbr-green"; 
         }else if(this.nbr[i] > 7){ 
          Ccolor = "nbr-black"; 
         }else{ 
          Ccolor = "nbr-red"; 
         } 

         var elem = '<div class="nbr '+ Ccolor +'" >'+ this.nbr[i] +'</div>'; 
         nbrCtn.append(elem); 
        } 
       }   
      }, 

      lastResult : function(n){ 
       Ccolor = ""; 
       if(n === 0){ 
        Ccolor = "nbr nbr-green"; 
       }else if(n > 7){ 
        Ccolor = "nbr nbr-black"; 
       }else{ 
        Ccolor = "nbr nbr-red"; 
       } 

       var nbrResult = $(".lastResult > div").length; 
       if(nbrResult === 5){ 
        $(".lastResult div:first-child").remove(); 
       } 

       var elem = '<div class="circle '+ Ccolor +'" >'+ n +'</div>'; 
       $(".lastResult").append(elem); 
      }, 

      rollAnimation : function(offset, n){ 
       var prog = $(".progress-line"); 
       if(offset){ 
        prog.width("100%"); 
        var nbrCtn = $(".nbr-ctn"); 
        nbrCtn.css("left" , "0px");     
        nbrCtn.animate({left: "-"+ offset +".5px"}, 6000, 'easeInOutQuint', function(){ 
         myRoll.lastResult(n); 
         myRoll.countDown(); 
        }); 
       } 
      }, 

      getRandomInt : function(min, max){ 
       min = Math.ceil(min); 
       max = Math.floor(max); 
       return Math.floor(Math.random() * (max - min)) + min; 
      }, 

      startRoll : function(n){ 
       var nbrCtn = $(".nbr-ctn"); 
       var gAnim = $("#game-animation"); 
       var idx = this.nbr.indexOf(n) + this.nbr.length * 4; 
       var elmWidth = nbrCtn.find(".nbr").width(); 
       var offset = idx * elmWidth - (gAnim.width()/2); 
       offset = this.getRandomInt(offset + 5, offset + elmWidth - 5); 
       this.rollAnimation(offset, n); 
      }, 

      countDown : function(){ 

       var prog = $(".progress-line"); 
       var gameStatus = $(".rolling > span"); 
       prog.animate({width : "0px"}, { 
        duration: 30000, 
        step: function(now){ 
         var rt = (now*3)/100; 
         gameStatus.html("Closing in " + rt.toFixed(2)); 
        }, 
        complete: function(){ 
         // when the progress bar be end 
         gameStatus.html("Rolling ..."); 
         myRoll.startRoll(myRoll.getRandomInt(0, 14)); 
        }, 
        easing: "linear" 
       }); 
      } 
     }; 


     window.onload = function(){ 
      myRoll.initRoll(); 
      myRoll.countDown(); 
     }; 
//]]> 

Answer 1

の

画像ルーレット=アニメーションを行くために、あなたは（方法を以下に、この私が物事を実装する必要がありますちょうど出る）。 ベローズコードの基本的な概念は、タブスイッチとそれに応じて現在の状態を設定する間の遅延を計算することです。

var prevTime,curTime; 
var rate = 500; //(miliseconds) you can set it. 

function update() 
{ 
    var diffTime = curTime - prevTime; 
    if (diffTime >= rate) 
    { 

     //check if difference is more than step value then calculate 
     //current state accordingly. so you will always be updated as you calculating lags. 


     // e.g. diffTime = 1500; 
     // you will need to jump Math.floor(diffTime/rate) which is 3. 
     // calculate current state. 

     //your code.... 
     prevTime = curTime; 
    } 
    requestAnimationFrame(update); 
}