2

Estava brincando com um snippet que fiz apenas para me divertir e me deparei com um problema que não consigo achar uma razão para sua causa. Segue o snippet:

var i = 0;

setInterval(function() { 
    document.querySelectorAll('img').forEach(function(imagem) {
        imagem.setAttribute('style', 'filter: hue-rotate('+ i +'deg)');
        if(i < 360) { i++ } else { i = 0 }
    });
}, 10);

Quando executo esse snippet numa página com apenas uma imagem e mais nada, pegando a url direta da imagem, ele funciona exatamente como eu quero. Mas se eu jogo o mesmo código numa página da web normal que possui imagens dentro dela, a rotação está pulando valores de forma absurda, geralmente passando por 3 valores antes de voltar para 0 graus. Ou seja, ao invés de a cada 0,1 segundos ele aumentar 1 grau, como deveria ser, aumenta 120 graus a cada 0,1 segundo fazendo as imagens piscarem. Se eu reduzo o delay do setInterval, fica fácil de ver a mudança nos graus acompanhando a aba do chrome. O que está causando isso, e como resolver?

Grato.

@edit Fiz um teste e alguns sites funcionam normais enquanto outros dão o erro descrito acima. Um exemplo de página que dá o erro descrito acima seria a busca de imagens do google, ou o portal Terra.

https://www.google.com/search?hl=pt-BR&tbm=isch&source=hp&biw=1366&bih=625&ei=k8ekXO_uIrO75OUPi_a68Ak&q=frutas&oq=frutas&gs_l=img.3..35i39j0l9.2057.6047..6112...1.0..0.102.647.6j1......2....1..gws-wiz-img.....0.nrbioU0Qm0A

8
  • O problema é o escopo de i. Todas as imagens executam um loop que incrementa i. Logo, quanto mais imagens, mais incrementos em i. O que torna sua animação tão rápida, dependendo da quantidade de elementos rodando esse loop.
    – LipESprY
    Commented 3/04/2019 às 14:51
  • 1
    Vou nem responder. O colega @bio deu o submit antes! ;D
    – LipESprY
    Commented 3/04/2019 às 15:00
  • 2
    Grato aos dois de qualquer jeito Commented 3/04/2019 às 15:03
  • 1
    @LipESprY, cara, eu nem tinha visto a conversa de vocês, estava fazendo os testes e formulando a resposta, rsrs, mas se quiser responder, sem problemas!
    – bio
    Commented 3/04/2019 às 15:03
  • 1
    @bio Claro que não. 2 respostas com a mesma solução não tem lógica. Mas não estou incomodado de vc ter respondido antes. Acredito que nosso objetivo seja o mesmo e foi alcançado, independente de quem publicou a resposta. ;D
    – LipESprY
    Commented 3/04/2019 às 15:05

1 Resposta 1

0

Há um erro de lógica em seu código. Quando você executa o querySelectorAll você está capturando todos os objetos imagem e colocando em um looping onde todas as imagens estão utilizando o mesmo ponteiro i que foi criado fora do escopo da sua função.

Para corrigir, basta colocar o setInterval dentro da função querySelectorAll, assim como a variável que serve como ponteiro var i, para que cada imagem tenha seu o próprio:

document.querySelectorAll('img').forEach(function(imagem) {
    var i = 0;
    setInterval(function() { 
        imagem.setAttribute('style', 'filter: hue-rotate('+ i +'deg)');
        if(i < 360) { i++ } else { i = 0 }
     }, 10);
});

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 .