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

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 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
}