Run functions in a loop JavaScript/JQuery

Question

I have a bunch of functions that calls another function. I want to run those group of functions in an infinite loop and can't really come up with a logic.

My code looks like this:

<script>

function runAnim(x,y) {
    //animation code
}

runAnim(a,2);
setTimeout(function() {
    $('#a').fadeOut('fast');
}, 3000);

runAnim(b,4);
setTimeout(function() {
    $('#b').fadeOut('fast');
}, 3000);

</script>

So I want to run these two 'runAnim' functions in an infinite loop. I tried

while(1) {}

but this hangs up my browser. I tried implementing setInterval method but don't know how I can do this. If you want I can post the runAnim(x,y) function for more clarity.

So I have few words whose letters fades in randomly and I feed in those words (a and b) through divs. I want these letters to animate endlessly. — AutoMate
– AutoMate, Commented Apr 17, 2018 at 6:03
Why not just call the function within the function itself when it is done with the animation? So when it's done just call the function again. — Charlie Fish
– Charlie Fish, Commented Apr 17, 2018 at 6:05

gurvinder372 · Accepted Answer · 2018-04-17 06:06:53Z

3

Change your runAnim method to include a call to runAnim via setTimeout so that you can an infinite loop while ensuring that maximum stack isn't exceeded.

function runAnim(x,y) {
    //animation code
    if ( y == 2 )
    {
       setTimeout( () => {
           runAnim(x,4);
           $('#a').fadeOut('fast'); //call the fadeout here itself
       }, 3000 );
    }
    else
    {
       setTimeout( () => {
           runAnim(x,2);
           $('#a').fadeOut('fast');
       }, 3000 );
    }
}

answered Apr 17, 2018 at 6:06

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

flx · Accepted Answer · 2018-04-17 06:18:11Z

You don't need an explicit infinite loop, you can just let the functions call the other one over and over again

Here is an example with chaining:

function fadeOutA() {
  $('#b').fadeIn('fast');
  $('#a').fadeOut('fast', fadeOutB);
}

function fadeOutB() {
  $('#a').fadeIn('fast');
  $('#b').fadeOut('fast', fadeOutA);
}

function stop() {
  $('#a, #b').stop();
}


$('#start').click(fadeOutA);

$('#stop').click(stop);

div {
  width: 50px;
  height: 50px;
  float: left;
  margin: 10px;

}

#a {
  background-color: green;
}

#b {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"></div>
<div id="b"></div>

<button id='start'>START</button>
<button id='stop'>STOP</button>

Mr. Raj Kale · Accepted Answer · 2018-04-17 07:23:42Z

-1

What i suggest is don't write any logic which run is infinite loop, because it will cause problem for your browser. But event if you want it to be done done something like below

create for loop for(var i=0;;i++){} and then place your function inside this loop which will execute unlimited times.

answered Apr 17, 2018 at 7:23

Mr. Raj Kale

871 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Run functions in a loop JavaScript/JQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related