Понимание JavaScript анонимных и именованных функций в объектных литералах

Question

Почему «полный» обратный вызов для третьей анимации происходит первым, до запуска какой-либо анимации?

Скрипт:

$( "#animate" ).delay(2000).animate(
    { "width":    "500px" },
    { "duration": 3000,
      "complete": function(){ $( "#animate" ).append( "1st<br />" ); }}
)
.delay(1000).animate(
    { "width":    "200px" },
    { "duration": 3000,
      "complete": function(){ complete( "2nd" ); }}
)
.delay(1000).animate(
    { "width":    "500px" },
    { "duration": 3000,
      "complete": complete( "3rd" ) }
);

function complete( ordinal ){
    $( "#animate" ).append( ordinal + "<br />" );
};

HTML:

<div id="animate" />

CSS:

#animate
{
    border: 1px solid red;
    height: 200px;
    width:  200px;
}

jsfiddle:

http://jsfiddle.net/nQftS/3/

Answer 1

"complete": complete( "3rd" )

Эта строка будет выполнять функцию complete, передавая параметр "3rd", а затем установит возвращаемое значение этой функции на "complete".

"complete": function(){ complete( "2nd" ); }

Эта строка будетвместо этого установите «complete» для функции, которая при вызове будет выполнять функцию complete, передавая параметр «2nd».

Answer 2

Обратный вызов ожидает функцию. Вы, однако, не передаете функцию. Вы вызываете функцию.

  "complete": complete( "3rd" )

, который добавляет вещи, как определено в этой функции. Затем он ничего не возвращает, поэтому он оценивает:

  "complete": undefined

Обратите внимание, что передача функции работает без скобок. Э.Г.

  "complete": complete

или

  "complete": function() { ... } // this is also a function

Answer 3

В вашей последней части оберните ее в функцию:

.delay(1000).animate( 
    { "width":    "500px" }, 
    { "duration": 3000,
      "complete": function(){complete( "3rd" ) }
    }
);

Если вы этого не сделаете, то функция вызывается немедленно, а это не , что вы хотели.