了解對象文字中的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”設置為一個函數，該函數在調用時將通過參數“ 2nd”執行complete功能。

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" ) }
    }
);

如果不執行此操作，則會立即調用該函數，這不是您想要的。