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”。

Answer 2

回调需要一个函数。但是，您没有传递函数。你调用一个函数。

  "complete": complete( "3rd" )

附加该函数中定义的内容。然后它不返回任何内容，因此它的评估结果为：

  "complete": undefined

请注意，传递函数不带括号。 E.g。

  "complete": complete

或

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

Answer 3

在最后一部分，将其包装在一个函数中：

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

如果你不这样做，那么立即调用该函数，这是不你想要的。

理解对象文字中的JavaScript匿名与命名函数

3 个答案: