了解对象文字中的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" ) }
    }
);

如果不执行此操作，则会立即调用该函数，这不是您想要的。