jQuery .animate() callback infinite loop

Question

A simple question: Why can I do this

var start = function() {
    $('#element').animate({}, 5000, 'linear', start);
}

but not this

    function start() {
        $('#element').animate({}, 5000, 'linear', start());
    }

?

The first works perfectly, restarting the animation after it completes. The second simply causes an infinite loop.

Answer 1

it's because in the first one you are sending the namespace of the function, when you add the () to the end of the function name it executes the function immediately

Answer 2

In your second function you are executing the function instead of passing a reference to the function, hence it's going into an infinite loop.

Change your second function from:

function start() {
 $('#element').animate({}, 5000, 'linear', start());
}

to

function start() {
  $('#element').animate({}, 5000, 'linear', start); //Notice the change to start
}

Answer 3

Either use

function start() {
    $('#element').animate({}, 5000, 'linear', start);
}

or

function start() {
    $('#element').animate({}, 5000, 'linear', function(){ start(); });
}

second case is useful if you want to actually pass some arguments to start..

Answer 4

In the second example, you are basically doing a recursive call to start().

What you want to do is pass the function start itself, like you are doing in your first example. Your second example is only providing the result of calling start().

Answer 5

In the second case, you're calling the function directly, instead of passing it as a parameter.

start() will call start immediately, and pass the return value of that to .animate(). This causes the infinite self recursion.