jQuery - Using anonymous function passed in as function parameter as jQuery callback function

Question

This is best explained by a code example, so can anyone explain why (in technical terms) the anonymous function passed to test doesn't get called after the jQuery hide event?

UPDATE: Not that is really matters for this example what this is referring to, but for clarity lets say test function is in the global scope and this is an anchor element.

test(this, function() {
    alert('Called by anonymous function!');
});

function test(object, callback) {
    $(object).hide('slow', callback);
}

Changing:

$(object).hide('slow', callback);

To:

$(object).hide('slow', callback());

works. Is this because callback isn't a named function in the current context or global window object?

You need to provide more code, especially what 'this' is. Apart from that, executing the handler manually is wrong. — Bergi
– Bergi, Commented Apr 26, 2012 at 6:44
It doesn't really matter what this is. But for argument sake the test function is in the global scope and this refers to an anchor element. Why is executing the hander using callback() wrong? It doesn't get executed if you merely pass the reference to the anonymous function as the callback to jQuery .hide(). — Matt
– Matt, Commented Apr 27, 2012 at 2:54

Thomas Jones · Accepted Answer · 2012-04-27 03:11:59Z

1

Your code should look more like this

test(this, function() {...});

You're not calling an anonymous function in your code, but I'm not sure what that syntax actually does

Check out this fiddle of a working example http://jsfiddle.net/L4NxD/2

Edit, made more edits to the fiddle to better duplicate original code. Use http://jsfiddle.net/L4NxD/1 and just http://jsfiddle.net/L4NxD/ to get earlier versions.

edited Apr 27, 2012 at 3:11

answered Apr 27, 2012 at 3:05

Thomas Jones

4,94730 silver badges35 bronze badges

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

4 Comments

Matt Over a year ago

This is no different to my code other than you have replaced this with a javscript selector. Which makes me think there is an error in the this object being passed in. Thanks for the demo. Issue considered narrowed down. Will run a few tests before accepting.

Matt Over a year ago

See jsfiddle.net/6dFm6 for the full code example and jsfiddle.net/6dFm6/1 for when callback is called using callback(). The first doesn't work the second does.

Thomas Jones Over a year ago

Not exactly sure why, but it has to do with the .remove() at the end. Removing that, and it works. jsfiddle.net/6dFm6/4 My suggestion is to wrap the $(this).remove() call inside the callback to hide, or remove it altogether if possible.

Matt Over a year ago

My theory was that the .remove() was removing the object before or during the event callback which may have prevented the callback from working, however I'm not sure how this works under the hood. Also I added a delay(5000) between the hide and remove and nothing changed. Any jQuery experts have an explanation?

Community · Accepted Answer · 2017-05-23 12:27:56Z

This is the correct way to do it.

http://jsfiddle.net/6dFm6/6/

Calling remove after the hide animation will remove the object and result in the animation callback not being called.

The reason it works in jsfiddle.net/6dFm6/1 is because the callback is executed at runtime and the value is passed and called during the callback event.

See these articles for varying level of clarity on what is returned by 'functionName()' as the callback. It appears 'undefined' is returned by the call, however the execution still happens at the correct time.

When to use () after a callback function name?

In JavaScript, does it make a difference if I call a function with parentheses?

Callback function - use of parentheses

do I need parenthesis when using a named function as an jquery ajax success callback

javascript syntax: function calls and using parenthesis

Collectives™ on Stack Overflow

jQuery - Using anonymous function passed in as function parameter as jQuery callback function

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related