Flickering occurs by using setInterval

Question

Below is my code, it shows normal at the beginning, however, as long as the number of fade out go to almost 20 times, then strong flickering occur, could anyone tell where it get wrong and how to fix it? Thanks.

function change() {
  let abc = document.getElementById("myDIV");
  abc.className = "mystyle";
  let aa = setInterval(function() {
    if (abc.className === "mystyle") {
      abc.className = "";
    }
  }, 1000);
  setTimeout(function() {
    clearInterval(aa)
  }, 1000);
  setInterval(change, 2000);
  return
}

.mystyle {
  background-color: coral;
  padding: 16px;
  opacity: 0;
  transition: opacity 1s linear;
}

<div id="myDIV">
  <p>I am myDIV.</p>
</div>
<p>Click the button to set a class for myDIV:</p>
<button onclick="change()">Try it</button>

every two seconds you `setInterval(change, 2000);` ... so after 4 seconds, `change` gets called twice a second, after 4 seconds it gets called 8 times a second, after 6 seconds it's 16 times a second ... put some console.logs in there and you'll see it!! — Jaromanda X, Jul 26 '22 at 06:35
also ... why are you setting an interval for 1000ms which you clear after 1000ms - that makes zero sense - you may as well just have a setTimeout for that — Jaromanda X, Jul 26 '22 at 06:37
@Jaromanda, No, you see the "Run code snippet", the first 14 cycles is quite even, the fading didn't speed up. The reason i add clearInterval is to clean the "aa" every cycle, to avoid what you just said... — eric2022, Jul 26 '22 at 06:50
right - so I'm wrong about the number of `change` functions doubling ever 2 seconds .. if you clear an interval after it runs once (which IS what you're doing with the FIRST interval) then you may as well just do a setTimeout (but you know better) ... as for the SECOND interval ... a NEW interval is started every time change gets called ... so, THAT should ALSO be a setTiemout, not a setInterval (you know the difference? clearly not) — Jaromanda X, Jul 26 '22 at 06:58
first of all, "aa", "abc" and "change" are *** s**t identifiers. Please try to use meaningful names for your variables, don't be scared to use long ones. — Pablo Recalde, Jul 26 '22 at 07:03
@Jarmanda Thanks. I just tried what you said to change "setInterval(change, 2000);" to "setTimeout(change, 2000), yes, it can runs many times without flickering now. However, in its first few loops, the speed is not even .. — eric2022, Jul 26 '22 at 07:16

score 0 · Answer 1 · answered Jul 26 '22 at 06:42

0

I see far too many setTimeouts and setIntervals.

I think you wanted this?

const abc = document.getElementById("myDIV");
const toggle = () => abc.classList.toggle("mystyle");
const change = () => { toggle(); setInterval(toggle , 2000)};

.mystyle {
  background-color: coral;
  padding: 16px;
  opacity: 0;
  transition: opacity 1s linear;
}

<div id="myDIV">
  <p>I am myDIV.</p>
</div>
<p>Click the button to set a class for myDIV:</p>
<button onclick="change()">Try it</button>

answered Jul 26 '22 at 06:42

mplungjan

169,008
28
173
236

@mplungian, Many thanks. Yes, this work, but could you tell me what's wrong in my code? Using my code, could you see the first 14 to 15 cycles is quite well, right? What's wrong? Thanks. – eric2022 Jul 26 '22 at 06:54
Your MAIN issue was the `setInterval(change, 2000);` INSIDE the change function. So each time you called change, you ADDED an interval every time change was called. – mplungjan Jul 26 '22 at 06:56
@mplungian, but you can see i have added a clearInterval ("aa") code to clean its previous interval, and you can see from the snippet my first 14 loops is quite even, how come start at 15 round or 16 round, it has drastic flickering...? – eric2022 Jul 26 '22 at 07:06
You are not clearing the `setInterval(change, 2000);` interval - you just keep setting it – mplungjan Jul 26 '22 at 07:38
@mplungian After your comment, i realise that is my mistakes, "setInterval(change, 2000)" cause double changes occur, should use "setTimeout(change, 2000)" to make one "change" per cycle happen. Thanks. – eric2022 Jul 26 '22 at 07:57
Sure. Or just use one setInterval – mplungjan Jul 26 '22 at 07:58
I do not see any instability here – mplungjan Jul 26 '22 at 08:02
1

Yes, so i think is my CPU problem. – eric2022 Jul 26 '22 at 08:04
Hi sir, I want to do the similar thing from the opacity approach, and I start this at play one time at first, however, not successful, here is the link of my question, https://stackoverflow.com/q/73132155/19324287, your help is much appreciated if possible...Thanks. – eric2022 Jul 27 '22 at 11:01

score 0 · Accepted Answer · edited Jul 26 '22 at 06:57

0

Here's another way to do it, closer to the original behaviour of your code, i.e. 1s with "mystyle" and 2s without:

<!DOCTYPE html>
<html>

<head>
  <style>
    .mystyle {
      background-color: coral;
      padding: 16px;
      opacity: 0;
      transition: opacity 1s linear;
    }
  </style>
</head>

<body>
  <div id="myDIV">
    <p>I am myDIV.</p>
  </div>
  <p>Click the button to set a class for myDIV:</p>
  <button onclick="change()">Try it</button>

  <script>
    function change() {
      let abc = document.getElementById("myDIV");
      abc.className = "mystyle";
      setTimeout(function() {
        let abc = document.getElementById("myDIV");
        abc.className = "";
      }, 1000);
      setTimeout(change, 2000);
      return
    }
  </script>
</body>

</html>

edited Jul 26 '22 at 06:57

mplungjan

169,008
28
173
236

answered Jul 26 '22 at 06:53

pdp8

206
1
6

Thanks for you code, I just test it, at the beginning (1 to 3 loops) the speed is not stable, then become stable....so still have problem....By the way, do you know what's wrong in my code? – eric2022 Jul 26 '22 at 07:02
@eric2022 - I've told you what's wrong, but you "know better" – Jaromanda X Jul 26 '22 at 07:03
This code has the same problem as OP code. If you click twice bum, it never ends. – Pablo Recalde Jul 26 '22 at 07:08
No, it doesn't. It uses one-off timeouts, not repeating (and uncleared) intervals that keep accumulating. – pdp8 Jul 26 '22 at 07:22
@mplungjan Yes, I accept this answer. I don't know why i put your codes to run in the browser, the first few loops are not stable, but i when try your codes in the code snippet this platform, it seems work well. So i think is my computer problem. Once again, thanks! – eric2022 Jul 26 '22 at 08:01

Flickering occurs by using setInterval

2 Answers2