자바 스크립트 코드가 작동을 멈 춥니 다.

Question

1 분마다 회전하는 룰렛에 관한 문제입니다. 문제 : Google 크롬이나 다른 탐색기에서 한 탭에서 다른 탭으로 전환하면 스크립트가 실행을 멈추고 룰렛이 멈 춥니 다. (당신이 방법을 다음에 물건을 구현해야이를 위해 스크립트 작업) 게임

//<![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); 
}