Understanding JavaScript anonymous vs. named functions in object literals

Question

Why does the "complete" callback for the third animation happen first, before any animations have started?

Script:

$( "#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/

James Montagne · Accepted Answer · 2011-08-29 20:01:51Z

5

"complete": complete( "3rd" )

This line will execute the complete function, passing in a parameter of "3rd" and then set the returned value of that function to "complete".

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

This line will instead set "complete" to a function, which, when called, will execute the complete function, passing a parameter of "2nd".

answered Aug 29, 2011 at 20:01

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pimvdb · Accepted Answer · 2011-08-29 20:02:15Z

4

The callback expects a function. You, however, do not pass a function. You call a function.

  "complete": complete( "3rd" )

which appends things as defined within that function. It then returns nothing, so it evaluates to:

  "complete": undefined

Note that passing a function works without parentheses. E.g.

  "complete": complete

or

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

answered Aug 29, 2011 at 20:02

pimvdb

155k80 gold badges312 silver badges357 bronze badges

1 Comment

ThinkingStiff Over a year ago

This was very clear. It made me realize the parens make the call, like the pattern: (function(){...})();. Knowing that it returned undefined, and that it is expecting a function declaration instead, lead me to a rewrite of complete() that works and still maintains the concise readability of "complete": complete( "3rd" ). New function: function complete( ordinal ){ return function(){ ... }; };.

Peter Mortensen · Accepted Answer · 2016-11-26 16:24:56Z

0

On your last part, wrap it in a function:

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

If you don't do this then the function gets called immediately, which is not what you wanted.

edited Nov 26, 2016 at 16:24

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 29, 2011 at 20:02

Naftali

147k41 gold badges247 silver badges304 bronze badges

Collectives™ on Stack Overflow

Understanding JavaScript anonymous vs. named functions in object literals

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related