Javascripts代码停止工作

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