Продолжайте анимацию Javascript, даже если на другой вкладке

Question

У меня есть вращающееся колесо, которое должно повернуться, несмотря ни на что. . Но, если я покину Tab, колесо перестает вращаться, пока я не фокусировать вкладку, в которой веб-сайт открыт в

Вот мой код:

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 это за колесо рулетки.

Анимация - это расчет, который каждый раз перерисовывает колесо, только с разными значениями (для имитации вращения).

Есть ли способ продолжить анимацию (расчет), даже если Веб-сайт «не в фокусе»?

Answer 1

Ну спасибо @Thomas Я нашел решение:

В начало от сценария я добавил:

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

Внутри из spin() я установил start var:

start = Date.now(); 

Теперь внутри из rotateWheel() я добавил и изменил:

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

и на конце из rotateWheel():

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

теперь анимация завершается, как только я вернусь к окну

Answer 2

Возможно, вы должны использовать requestAninationFrame, который запрашивает следующий кадр только в том случае, если окно частично или полностью видно.

Чтобы включить анимацию, находясь на другой вкладке, создайте свой собственный таймер с помощью функции setTimeout.