Jquery .animate() Callback Infinite Loop

A simple question: Why can I do this var start = function() { $('#element').animate({}, 5000, 'linear', start); } but not this function start() { $('#element').ani

Solution 1:

Either use

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

or

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

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

Solution 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:

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

to

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

Solution 3:

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

Solution 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().

Solution 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.