即使在另一个选项卡中，也要继续Javascript动画

我有一个旋转的轮子，不管发生什么，它都会转动。但是，如果我离开标签，轮子就会停止旋转，直到我聚焦在打开网站的标签上

这是我的密码：

var colors =["#DD7039", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE", "#171A21", "#FEFEFE"];
var numbers =["0","21","10","13","3","14","1","17","11","23","4","18","9","24","7","20","5","15","16","22","6","12","19","8","2"];

var startAngle = 0;
var arc = Math.PI / (colors.length / 2);
var spinTimeout = null;

var timeToSpin = 2000;

var spinArcStart = 10;  
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

function drawRouletteWheel() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;

        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);


        ctx.strokeStyle = "black";
        ctx.lineWidth = 2;

        ctx.font = 'bold 12px Helvetica, Arial';

        for(var i = 0; i < colors.length; i++) {
            var angle = startAngle + i * arc;
            ctx.fillStyle = colors[i];

            ctx.beginPath();
            ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
            ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
            ctx.stroke();
            ctx.fill();

            ctx.save();
            var color;
            if (colors[i] == "#FEFEFE") {
                color = "black";
            }else{
                color ="white";
            }
            ctx.fillStyle = color;
            ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius,
                250 + Math.sin(angle + arc / 2) * textRadius);
            ctx.rotate(angle + arc / 2 + Math.PI / 2);
            var text = numbers[i];
            ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
            ctx.restore();
        }

        //Arrow
        ctx.strokeStyle = "#F0C24E";
        ctx.beginPath();
        ctx.moveTo(250 + 0, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 0, 250 - (outsideRadius - 80));
        ctx.lineWidth = 4;
        ctx.stroke();
    }
}

function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * timeToSpin;
    rotateWheel();
}

function rotateWheel() {
    spinTime += 30;
    if(spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
    clearTimeout(spinTimeout);
    var degrees = startAngle * 180 / Math.PI + 90;
    var arcd = arc * 180 / Math.PI;
    var index = Math.floor((360 - degrees % 360) / arcd);
    ctx.save();
    ctx.font = 'bold 30px Helvetica, Arial';
    ctx.strokeStyle = "black";
    ctx.fillStyle = "black";
    var text = numbers[index]
    ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
    ctx.restore();
}

function easeOut(t, b, c, d) {
    var ts = (t/=d)*t;
    var tc = ts*t;
    return b+c*(tc + -3*ts + 3*t);
}

drawRouletteWheel();

以下代码>var颜色>var颜色=<代码>var颜色=<代码>var颜色=[以下代码>var颜色>var颜色=[以下代码>var颜色>var颜色=[以下以下代码代码>var颜色=[“DD7039”号、“訛DD7039号，”DD70707070707070707039“，，“非非费菲”一个21“，“费费费菲”，以及“，，“171A21个21 21 21”，，“351111111111111111A21，”，”，”，”若若若若若若若若费费费菲，”，”，”，”，”，”，”，”费费费费费费菲“，，，，，，，，，“费费费费费费费费费菲“，，，，，，，，，，，，，，，“费费费费费费费费费费费费费费费费费费费费费费费菲”、“”、“FEFE“，“#171A21”、“#FEFE”、“#171A21”、“#FEFE”、“#171A21”、“#FEFEFE”、“#171A21”、“#FEFE”]； 风险值编号=[“0”、“21”、“10”、“13”、“3”、“14”、“1”、“17”、“11”、“23”、“4”、“18”、“9”、“24”、“7”、“20”、“5”、“15”、“16”、“22”、“6”、“12”、“19”、“8”、“2”]； var-startAngle=0； var arc=Math.PI/（colors.length/2）； var spinTimeout=null； var-timeToSpin=2000； var spinArcStart=10； var spinTime=0； var spinTimeTotal=0； var-ctx； 函数DrawRouletWheel（）{ var canvas=document.getElementById（“canvas”）； if（canvas.getContext）{ var=200； var textRadius=160； var insideRadius=125； ctx=canvas.getContext（“2d”）； ctx.clearRect（0,0500）； ctx.strokeStyle=“黑色”； ctx.lineWidth=2； ctx.font='bold 12px Helvetica，Arial'； 对于（变量i=0；i=自旋时间总计）{ 停止旋转车轮（）； 返回； } var spinAngle=spinAngleStart-easeOut（自旋时间，0，spinAngleStart，SpinangleTotal）； startAngle+=（spinAngle*Math.PI/180）； drawRouletteWheel（）； spinTimeout=setTimeout（'rotateWheel（）'，30）； } 功能停止旋转轮（）{ clearTimeout（spinTimeout）； 变量度=startAngle*180/Math.PI+90； var arcd=arc*180/Math.PI； var指数=数学地板（（360度/360度）/arcd）； ctx.save（）； ctx.font='bold 30px Helvetica，Arial'； ctx.strokeStyle=“黑色”； ctx.fillStyle=“黑色”； 变量文本=数字[索引] ctx.fillText（文本，250-ctx.measureText（文本）.width/2250+10）； ctx.restore（）； } 功能输出（t、b、c、d）{ 变量ts=（t/=d）*t； var tc=ts*t； 返回b+c*（tc+-3*ts+3*t）； } drawRouletteWheel（）； 基本上这是轮盘赌

动画是一种计算，每次使用不同的值（模拟旋转）重新绘制轮子

---

是否有方法继续动画（计算），即使网站“未聚焦”

您可能应该使用

requestAnationFrame

，仅当窗口部分或完全可见时才请求下一帧

要在您处于不同选项卡时允许播放动画，请使用

setTimeout

功能创建您自己的计时器。

多亏了@Thomas，我找到了解决方案：

在脚本的开头我添加了：

if (!Date.now) {
    Date.now = function() { return new Date().getTime(); }
}
var start = null;

在

spin（）的内部我设置了开始变量：

start = Date.now();

现在在
rotateWheel（）的内部
我添加并更改了：

// At the beginning of the function
timePassed = Date.now() - start;
spinTime += timePassed;

在
旋转轮（）的端：

现在，当我回到窗口时，动画就完成了。
@RayonDabre没有帮助也不会帮助我们理解这个问题@RayonDabre更长的评论：我已经尝试了requestAnimationFrame和setTimeout，在这两种情况下，当标签模糊时，循环速度都减慢到了50%以下。测试环境是最新的Firefox。您可以计算每个时刻的角度，而不是增加每帧的角度。你有一个展示台/小提琴，我们可以在那里观看这场比赛吗？那怎么办？你能举个例子吗？
// right before the '.setTimeout'
start += timePassed;