Why is my jquery animate() callback causing an overflow ? Recursion

Question

I am using a recursive callback with the animate() jquery function. However the page crashes everytime from the start.

var goingDown = true;

function animateChevron() {
        if (goingDown) {
            goingDown = !goingDown;
            $('#chevron').animate({'opacity': 1}, 500, animateChevron);
        }
        else {
            goingDown = !goingDown;
            $('#chevron').animate({'opacity': 0.1}, 500, animateChevron);
        }
}

$(document).ready(function(){
    animateChevron();
});

Thank you

EDIT: I want it to act in a loop: the chevron appears, then disappears, then appears again etc. As long as the user is on the page.

`animateChevron` is called in both the conditions - of course it is entering an infinite loop. What is it that you want to achieve ? — Arshabh Agarwal, Mar 05 '17 at 13:23
I want exactly this animation to be an inifinite loop, as long as the user is on the page. So the chevron appears, then diseappears, then appears etc. — Guilhem Fry, Mar 05 '17 at 14:16

Arshabh Agarwal · Answer 1 · 2017-03-05T14:40:46.083

1

Try this

$('#chevron').animate({'opacity': 1}, {
  duration: 500, 
  complete: animateChevron
});

Also you can make this better

function animateChevron() {       
 $('#chevron').animate({'opacity': 1}, {
   duration: 500         
 }).animate({'opacity': 0.1}, {
  duration: 500,
  complete: animateChevron    
 });        
}

edited Mar 05 '17 at 14:40

answered Mar 05 '17 at 14:30

Arshabh Agarwal

556
2
15

score 0 · Answer 2 · answered Mar 05 '17 at 13:21

Your code is recursing infinitely.

I changed it to add a parameter goingDown, which when true will cause the animation to hide the chevron, and set the state of a global variable downState to match goingDown. I removed the recursion, you don't need it.

var downState = null;

function animateChevron(goingDown) {
  if (!goingDown) {
        $('#chevron').animate({
      'opacity': 1
    }, 500);
  } else {
    $('#chevron').animate({
      'opacity': 0.1
    }, 500);
  }
  downState = goingDown;
}

$(document).ready(function() {
  animateChevron(true);
});

#chevron {
font-size: 28px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="chevron">
&raquo;
</div>

The fact is that I want it to act as a loop, infinetly. The chevron appears, then disappears, then appears again etc. — Guilhem Fry, Mar 05 '17 at 14:24
Call it from within an interval - use setInterval and toggle the state passed in the parameter. Or use a .gif. — user2182349, Mar 05 '17 at 14:31

score 0 · Answer 3 · edited May 23 '17 at 12:31

Here is another solution due to the solution I offered first (can still be found at the bottom of this answer) didn't fit the needs of the asker.

According to the following question async callbacks will not cause any stack overflows.

Will recursively calling a function from a callback cause a stack overflow?

(function animateChevron() {
  // Chevron visible at this point
  $('#chevron').animate({'opacity': 0}, 500, () => {
    // Chevron invisible at this point
    $('#chevron').animate({'opacity': 1}, 500, animateChevron);
  });
})();

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

I found a very neat solution right here at stackoverflow as alternative.

How to make blinking/flashing text with css3?

Code snippet by Mr. Alien:

(function blink() { 
  $('#chevron').fadeOut(500).fadeIn(500, blink); 
})();

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

I just updated my answer with another approach. I am not sure about what you need to do within the loop. Is `.animate()` enough? If so the updated approach might help. — Bee, Mar 05 '17 at 15:38

score 0 · Accepted Answer · answered Mar 05 '17 at 15:15

Please try this

$(document).ready(function(){
 var speed=500; //in micro seconds
 setInterval(function(){
  
    var opacity=$('#chevron').css('opacity')<1 ? 1 : .1; 
  $('#chevron').animate({'opacity':opacity},speed);
    
 },speed);
});

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

<div id="chevron">Chevron</div>

Why is my jquery animate() callback causing an overflow ? Recursion

4 Answers4