Recursive call in JavaScript not working?

Question

I have defined a function and calling it recursive and its not working here is the code

$(document).ready(function () {
//if i remove the slider call here it doesn't even run the function slider     
slider();
    function slider() {
        $("#img2").fadeOut(3000, function () {
            $("#img2").fadeIn(3000);
        });
//recursive call
        slider();
    }
});

Your recursion never end, Try console.log("something"); and see the result — izissise
– izissise, Commented Nov 5, 2013 at 14:49
You're calling slider() right after .fadeOut, but the first thing slider does is the fadeOut again. A fiddle or at least a description of what par of it isn't working would be nice. — MildlySerious
– MildlySerious, Commented Nov 5, 2013 at 14:49

tymeJV · Accepted Answer · 2013-11-05 14:59:01Z

8

It's working, but you call slider() again before the fadeOut has completed. Stick the recursive call in the callback:

function slider() {
    $("#img2").fadeOut(3000, function () {
        $("#img2").fadeIn(3000, function() {
            //As Kristof Feys pointed out, you probably want to wait for the 
            //fade in to complete, then call the method.
            slider();
        });
    });
}

A demo as well: http://jsfiddle.net/9k7e3/

edited Nov 5, 2013 at 14:59

answered Nov 5, 2013 at 14:49

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

2 Comments

Kristof Feys Over a year ago

Wouldn't he want to call it after the fadeIn has completed rather than the fadeOut?

tymeJV Over a year ago

@KristofFeys -- Very good point, let me add a callback to the fadeIn

levi · Accepted Answer · 2013-11-05 14:59:42Z

Its working just fine. You must remember the fadeOut and fadeIn function are asynchronous. Meaning, the browser does not wait until the animation is done before it executes the next line of code. So as a result, your slider() function is getting called thousands of times before the animation even completed one iteration.

If you look in the console, you will see this error being thrown:

Uncaught RangeError: Maximum call stack size exceeded

Meaning you are calling the slider function too many times. The solution is to place the slider() call inside the fadeIn callback, which will be executed only once the animation is complete.

$(document).ready(function () {
    slider();
    function slider() {
        $("#img2").fadeOut(3000, function () {
            $("#img2").fadeIn(3000, function(){
                slider();
            });
        });
    }
});

Jsfiddle

Collectives™ on Stack Overflow

Recursive call in JavaScript not working?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related