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); 
}