Javascript代码停止工作

Question

问题是关于每隔1分钟轮换一次的轮盘问题： 问题：当我在谷歌浏览器或任何其他导航器上从一个标签切换到另一个标签时，脚本停止运行，轮盘停止（并且我需要回去的标签再次为了使脚本工作）游戏

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