clearInerval and setInterval setup not working

Question

 function dm() { (js code) }

 function lm() { (js code) }


 if (document.body.style.backgroundColor === "black") {
    var lol = setInterval(dm, 20);
    clearInterval(lol2);
  }
  else {
    var lol2 = setInterval(lm, 20);
    clearInterval(lol);
  }

Anyone know why this setup isn’t working? Whenever I try it, both the intervals just keep running no matter what.

How is this code called? Is it in a function or does it run when the page loads? What do `dm` and `lm` do? — Emiel Zuurbier, Apr 29 '21 at 20:40
Well, then let's say the body has a background color that is `black`. Then `var lol = setInterval(dm, 20);` is called and the `dm` function is called every 20ms. Now how would the interval ever stop? None of the other code in the `if` statement, like `clearInterval(lol);`, is ever called. So your interval will go on forever. Unless the `if` statement is somehow called again and another check is performed to see if the interval should stop or not. Could you elaborate more on what you're trying to do. Maybe you have the wrong tool for the job. — Emiel Zuurbier, Apr 29 '21 at 20:45
where you are clearing lol or lol2 interval? This code will execute 1 time and will create infinite intervals. Clear your concept on variable scoping and read about recursive function. — sachin kumar, Apr 29 '21 at 20:47
Assuming that the background color is set inline with `style="background-color:black";`, `lol` will run forever because there's nothing telling it to stop. If the background isn't black (or set via a class or JS), then `lol2` will run forever, but for the same reason. Why would you expect anything different? — Scott Marcus, Apr 29 '21 at 21:09

score 0 · Accepted Answer · edited Apr 30 '21 at 17:13

0

Be sure you have the rgb written correctly in the IF statement when using getComputedStyle.

You can see from the console log that it returns a rgb value.

let dm = () => { console.log("dm") }
let lm = () => { console.log("lm") }
let bg = document.getElementsByTagName("body")[0];
let computed = getComputedStyle(bg);
let style = computed.backgroundColor;
 console.log(style)

function background(style) {
 if (style === "rgb(0, 0, 0)") {
    setInterval(dm, 2000);
    clearInterval(1)
  }
  else {
    setInterval(lm, 2000);
    clearInterval(2)
  }
}
background(style);

//this is just to show how changing the background and calling the function again set and clears intervals
setTimeout(function setOrange() {
  bg.style.backgroundColor = "orange";
  background();
}, 5000)

body {
  background-color: black;
}

edited Apr 30 '21 at 17:13

Scott Marcus

64,069
6
49
71

answered Apr 29 '21 at 21:32

Justin

2,873
3
9
16

If `style === "rgb(0, 0, 0)"` evaluates to `true`, then `setInterval(dm, 2000);` will be called. The question is: how will that interval be stopped when that `if` statement is never evaluated again? Same goes for the `else` statement. – Emiel Zuurbier Apr 29 '21 at 21:46
Try console logging `console.log(setInterval(dm, 2000));` then the number that is return put that into you `clearInterval(x)` – Justin Apr 29 '21 at 22:31
Sure, I'm aware of how it works. But your solution isn't doing that. `dm` and `lm` are references to the functions, not references to the timeouts. – Emiel Zuurbier Apr 29 '21 at 22:33
Here’s the pen I’m working on. Open the console and it will show “dm” twice at which point I change the BG to orange and it switches to “lm” and clears “dm”. https://codepen.io/jfirestorm44/pen/vYgwvzw?editors=1112 – Justin Apr 29 '21 at 22:43
1

FYI: [`document.getElementsByTagName("body")[0];`](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) is really bad coding and should not be used. – Scott Marcus Apr 30 '21 at 16:57

score -2 · Answer 2 · answered Apr 29 '21 at 20:46

-2

That's not working because document.body.style.backgroundColor not return a value so you can't compare it you need to use getComputedStyle() method which will return the body style in rgb()
Example

if(window.getComputedStyle(document.body, null).getPropertyValue("background-color") === "rgb(0, 0, 0)") {
    var lol = setInterval(dm, 20);
    clearInterval(lol2);
  }
  else {
    var lol2 = setInterval(lm, 20);
    clearInterval(lol);
  }

answered Apr 29 '21 at 20:46

Mahmoud Y3c

94
1
9

Still, even `document.body.style.backgroundColor` would not return anything, the code in the `else` statement would run starting `var lol2 = setInterval(lm, 20);`. The issue of being able to call `clearInterval(lol2)` still persists. – Emiel Zuurbier Apr 29 '21 at 20:50
Can't understand ? What i mean in the comment that your condition isn't working because there's no value to compare it are you tried the example ? – Mahmoud Y3c Apr 29 '21 at 20:58
If you tried it and not working try to explain what happened better to understand you – Mahmoud Y3c Apr 29 '21 at 20:59
`document.body.style.backgroundColor` will return a value if the `background-color` is set with an inline style. – Scott Marcus Apr 29 '21 at 21:10
And FYI: `window.getComputedStyle(document.body, null).getPropertyValue("background-color")` can be written simply as: `getComputedStyle(document.body).backgroundColor` – Scott Marcus Apr 29 '21 at 21:12
OK. There's nothing else i can help you with – Mahmoud Y3c Apr 29 '21 at 21:40

clearInerval and setInterval setup not working

2 Answers2