requestAnimationFrame ведет себя странно с движущимися изображениями во время выключения экрана

Question

У меня скользящие картинки медленно движутся вдоль экрана. Как только они уходят с экрана, они откидываются назад к ленте. Таким образом, все работает отлично, когда вы находитесь на веб-странице, но когда вы уходите, и одно из изображений выходит за рамки. он получает обратно в неправильном месте. Я думаю, что это может быть что-то с requestAnimationFrame, но я не знаю, что может вызвать это.

function tick(timePassed) 
{ 
//dont worry about it 
area.tick(); 
//updates the imgs X position 
for (var i = 0; i < loadedImgs.length; i++) 
{ 
    loadedImgs[i].x -= (timePassed * 10)/1000; 
    if (loadedImgs[i].x + loadedImgs[i].width <= 0) 
    { 
     loadedImgs[i].x = totalLength - loadedImgs[i].width; 
    } 
} 
//updates there y position based on scroll wheel 
dy -= dy * .1; 
y += dy/10; 



} 

буфер функция

//buffer function 
function update() 
{ 

buffer.clearRect(0, 0, width, 600); 
area.draw();//this has nothing to do with what going on 
if (showAlert)//checks to see if a message is needed 
{ 
    buffer.font = "30px monospace"; 
    var strings = alertMessage.split(" "); 
    var charCount = 0; 
    var line = 0; 
    for(var i =0;i<strings.length;i++) 
    { 
     buffer.fillText(strings[i], (width/5) + (charCount* letterSize), 300 + (line * 30)); 
     if (Math.floor(charCount/50) > 0) 
     { 
      line++; 
      charCount = 0; 
     } 
     else 
     { 
      charCount += strings[i].length + 1; 
     } 

    } 

} 
else 
{ 
    //paints all imgs 
    for (var i = 0; i < loadedImgs.length; i++) 
    { 
     buffer.drawImage(loadedImgs[i].obj, loadedImgs[i].x, y); 
    } 
} 
//dont worry about it 
buffer.drawImage(area.canvas, (width/2) - (area.width/2), y + 1000); 
//calls the render 
render(); 

}

визуализация функция

function render() 
    { 
      //paints to main canvas 
      ctx.clearRect(0, 0, width, 600); 
      ctx.drawImage(b, 0, 0); 
    } 

держит время

function renderLoop(time) 
{ 
    var timePassed = time - lastRender; 
    if (timePassed < 33) { window.requestAnimationFrame(renderLoop); return; } 
    window.requestAnimationFrame(renderLoop); 
    lastRender = time; 
    tick(timePassed); 
    update(); 

    } 

Answer 1

requestAnimationFrame остановится, когда его вкладка браузера теряет фокус, поэтому, когда фокус возвращает ваше время в renderLoop, это намного больше, чем вы могли ожидать.

Это заставляет renderLoop предполагать, что больше времени прошло и отбрасывает ваши репозиции.