Loop that changes the Hue-Rotate

Asked

Viewed 36 times

2

I was playing with a snippet I made just for fun and I came across a problem I can’t find a reason for your cause. Follow the 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);

When I run this snippet on a page with only one image and nothing else, taking the direct url of the image, it works exactly as I want. But if I play the same code on a normal web page that has images inside it, the rotation is jumping values absurdly, usually going through 3 values before going back to 0 degrees. That is, instead of every 0.1 seconds it increases 1 degree, as it should be, it increases 120 degrees every 0.1 second making the images blink. If I reduce the delay of the setInterval, it is easy to see the change in degrees accompanying the Chrome flap. What is causing this, and how to resolve?

Grateful.

@Edit I did a test and some websites work normal while others give the error described above. An example page that gives the error described above would be the search for google images, or the Earth portal.

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

javascript css3 filter

  • The problem is the scope of i. All images run a loop that increments i. Therefore, the more images, the more increments in i. What makes your animation so fast, depending on the amount of elements running this loop.

  • Thank you, it makes sense

  • I’ll give you a solution. Wait a minute. ;)

  • I intended to solve alone but can post that I mark the reply. Thanks again.

  • 1

    I won’t even answer. Colleague @bio gave Submit before! ;D

  • 2

    Thank you both anyway

  • 1

    @Lipespry, man, I hadn’t even seen your conversation, I was doing the tests and formulating the answer, rsrs, but if you want to answer, no problem!

  • 1

    @bio Of course not. 2 responses with the same solution has no logic. But I’m not bothered that you have answered before. I believe our goal is the same and has been achieved, regardless of who published the answer. ;D

Show 3 more comments

1 answer

0


There is a logic error in your code. When you run the querySelectorAll you are capturing all the image objects and placing in a looping where all the images are using the same pointer i that was created outside the scope of its function.

To fix, just put the setInterval within the function querySelectorAll, as well as the variable that serves as the pointer var i, so that each image has its own:

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

Browser other questions tagged javascript css3 filter

You are not signed in. Login or sign up in order to post.