Weiter Javascript Animation, auch wenn in einem anderen Tab

Question

Ich habe ein drehendes Rad, das egal was drehen sollte. . Aber, wenn ich die Tab verlassen, stoppt das Rad drehen, bis ich auf die Registerkarte konzentrieren, in denen die Website in offen

Hier ist mein Code:

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

Basiclly dies für ein Roulette-Rad ist.

Die Animation ist eine Berechnung, die das Rad jedes Mal neu zeichnet, nur mit anderen Werten (um das Drehen zu simulieren).

Gibt es eine Möglichkeit, die Animation (Berechnung) fortzusetzen, auch wenn die Website "nicht im Fokus" ist?

Answer 1

Nun dank @Thomas fand ich meine Lösung:

Am Anfang des Skript ich hinzugefügt:

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

Innen von spin() stelle ich die Start var:

start = Date.now(); 

jetzt innerhalb von rotateWheel() I hinzugefügt und geändert:

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

und am Ende von rotateWheel():

// right before the '.setTimeout' 
start += timePassed; 

jetzt die Animation abgeschlossen ist, wenn ich an das Fenster zurück

Answer 2

Sie sollten wahrscheinlich requestAninationFrame verwenden, die nur dann das nächste Frame anfordert, wenn das Fenster teilweise oder vollständig sichtbar ist.

Um die Animation während einer anderen Registerkarte zu ermöglichen, erstellen Sie Ihren eigenen Timer mit der Funktion setTimeout.