3

Já vi em vários exemplos pela web principalmente no MDN usando a seguinte sintaxe para chamar o método requestAnimationFrame():

function minhaFuncao() {
    requestAnimationFrame(minhaFuncao);
}

minhaFuncao();

Essa maneira não estaria tecnicamente errada? pois o sentido de usar o método requestAnimationFrame() é executar um código antes do navegador renderizar a página novamente e quando o código similiar do snippet de cima for usado a função minhaFuncao() ela será executada no momento em que for chamada já se usar a seguinte sintaxe:

function minhaFuncao() {
    requestAnimationFrame(minhaFuncao);
}

requestAnimationFrame(minhaFuncao);

Será executado quando o navegador estiver pronto para executar (pelo menos é o que eu entendi sobre ambos :)) qual das sintaxes acima eu devo utilizar no meu código?

2
  • @Robert Cezar. Há resposta citada não tem sentido com a minha pergunta é sobre outro assunto. Commented 2/07/2020 às 21:17
  • É só um exemplo de ambas às sintaxes... Commented 6/07/2020 às 16:49

2 Respostas 2

3
+100

Se a minhaFuncao inicia a animação, no segundo exemplo, a animação só começará depois da atualização da página, não imediatamente, como no primeiro exemplo

A primeira vista pode parecer indiferente, e na maioria dos casos é, mas faz diferença, o desfoque da aba (minimizar o navegador ou trocar de aba) fará com que a página não seja atualizada, execute o código abaixo, saia da aba e depois de um tempo volte:

let i = 0;

function minhaFuncao() {
    console.log(i++);
    requestAnimationFrame(minhaFuncao);
}

requestAnimationFrame(minhaFuncao);

O console voltará no mesmo ponto que saiu e não algumas dezenas a frente, então se, antes de requestAnimationFrame(minhaFuncao) ser chamado o usuário trocar de aba? A animação só começará a ocorrer quando ele voltar, o que pode ser vantajoso ou não, pode ser que tu queira que, mesmo que o usuário não tenha a página focada, execute pela primeira vez, já que na primeira vez que a animação ocorre, também é definido alguns valores importantes ou iniciado algum processo assíncrono

Então, tem diferença, você até percebeu, mas em geral ambos funcionarão quase igual

Um caso de uso em que essa diferença é importante é um chat em tempo real, onde você só atualiza com as novas mensagens quando o usuário está com a aba aberta, mas na primeira vez que carregar a página, mesmo que o usuário não esteja na aba do chat, já deve carregar as mensagens anteriores, para não acumular toda a atualização depois

1
  • 1
    Verdade, ambas devem ser usadas em situações diferentes, mas na maioria das vezes eu vou optar no segundo exemplo. Commented 8/07/2020 às 15:07
2

Ambas as formas estão corretas, a intenção de usar o requestAnimationFrame é evitar perdas de frames (jank), agendando a execução de um código para o início do próximo frame.

A ideia por trás dessa recursão:

function animationLoop() {
  ... ex. rotacionar, mover, limpar, checar colisões..
  requestAnimationFrame(animationLoop);
}

animationLoop()

Faz bastante sentido para cases de animações onde de fato você deseja otimizar a execução (max 60fps ~ 16,7ms por frame) e controlar os objetos, isso vai ficar rodando em loop ao menos que interrompa a execução com algum return dentro do animationLoop.

Mesmo chamando diretamente conforme abaixo, a function animationLoop ainda assim será agendada e executada no início do próximo frame.

requestAnimationFrame(animationLoop);

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .