Nest Multiple Set-Interval Function Within a Function, And Make That Function Infinite

JavaScript
1

Hi folks!

I want to nest multiple setInterval functions within a parent function and then set that parent function to infinite, so that the entire function, within loops infinitely. Is that possible? Thanks in advance for your help!

So far, I created a JavaScript animation that consists of 3 different setInterval functions. How do I get the entire thing to repeat infinitely? See JSFiddle here: https://jsfiddle.net/MenelikMakonnen/ebs2m0rq/

See javascript code here:


$(document).ready(function() { 


	setInterval(function(){
     $(".red-one").addClass("red-one-glow");
  	},300);

  setInterval(function(){  
     $(".red-two").addClass("red-two-glow");
   	},200);

  setInterval(function(){
     $(".red-three").addClass("red-three-glow");
  	},100);


});

After some research on Stack Overflow, I came up with this addition to m code:

$(document).ready(function() { 

function animateAll() {
 var listItems = $('.red').length;
   var count = 0;

	setInterval(function(){
     $(".red-one").addClass("red-one-glow");
  	},300);

  setInterval(function(){  
     $(".red-two").addClass("red-two-glow");
   	},200);

  setInterval(function(){
     $(".red-three").addClass("red-three-glow");
  	},100);

count += 1;
     if (count >= listItems) {
           count = 0;
      }
animateAll();
}
});

But this doesn’t work! :persevere::tired_face: What I’m I doing wrong?:thinking:

2

Well, you are not nesting those. They are just interpreted sequentially and then each interval runs concurrently.

The other problem is that you are adding the classes without removing the old ones. When it sees that that class is already there it doesn’t do anything, so whatever class was successfully added last will win. You can remove specific classes with removeClass or if you send it no parameters it will just remove them all.

For this reason, I wouldn’t use class to target the jQuery selector if I could avoid it.

Here is a pen with a simple example. It starts an interval of 1s to change the background color. Then if waits 500ms and starts another interval to do the opposite - this way they are 500ms out of phase.

$(document).ready(function() {
  setInterval(function() {
    $("#hi").removeClass("blue").addClass("green");
  }, 1000);
  
  setTimeout(function() {
    setInterval(function() {
      $("#hi").removeClass("green").addClass("blue");
    }, 1000);
  }, 500);
});
3

Hey @kevinSmith, for this same example that you posted, how would you make it run infinitely? Also, you are correct, those setInterval functions that I posted were not nested, but my goal was to house all those setInterval functions (or nest them) in one function, and then set that function to run infinitely. Basically I want that entire group of animated three rings to run infinitely. Hope my logic isn’t off lol…

4

I don’t understand “make it run infinitely” - it will run indefinitely. the setInterval function keeps running until either the program stops running or you manually clear it. It will never stop. If I need to stop it, I can do something like:

const myInterval = setInterval(function() ...

and then later if I want it to stop:

clearInterval(myInterval)

Do the changing colors in my example stop? They should switch every 500ms until the program stops.

5

‘I don’t understand “make it run infinitely” - it will run indefinitely.’…yeah that’s what I mean, indefinitely lol!

And yes, after awhile, the changing colors in your program does stop. Maybe like after a couple minutes or so.

Also, in this statement, “they should switch every 500ms until the program stops”, what do you mean by “until the program stops”? Sorry for my misunderstanding. I consider personally, that I shouldn’t get confused on this kind of simple stuff, but unfortunately after hours of coding, my brain is almost fried…

Also, this is an example of the type of indefinite function that I’m talking about. https://jsfiddle.net/MenelikMakonnen/4v2drbao/ (fork). This was my original inspiration. Thanks for all the help man!:tired_face::neutral_face:

6

what do you mean by “until the program stops”?

I mean until the program stops - you close that browser window, your computer crashes, there’s a power outage, a biblical flood, alien lizard men attack and set off an EMP and shut down the electrical grid … whatever. It should not stop on it’s own. Any thing done with setInterval should run indefinitely. It it is stopping, then there is something wrong with the computer, the browser, or codepen. I tell “add green” one to run every 1000ms, then I wait 500ms and tell the “add blue” one to run every 1000ms also. There is no limit to how many times they run.

I don’t know why yours is stopping, mine is still running after 10 minutes. It should keep running until I stop it or the aforementioned lizard man attack.

7

Oh ok hahaha…that’s weird that it’s stopping…I mean my computer has little freezing problems every now and then but idk…the one at https://jsfiddle.net/MenelikMakonnen/4v2drbao/, is still running. Maybe because it’s a CSS animation, and maybe those are “lighter” and run better, just thinking out loud…

8

Don’t know - mine is still going strong.

1 Like
9

Thankyou for all your help man. Mad thanks for when y’all coders take time to show me something. Was glad to see your username pop up on this post today! Cheers!

10

That’s why we’re here. We’re just a little further up the ladder. In no time you’ll be helping those below you.

1 Like