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, Apr 26 '12 at 06: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, Apr 27 '12 at 02:54

Thomas Jones · Answer 1 · 2012-04-27T03:11:59.650

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 '12 at 03:11

answered Apr 27 '12 at 03:05

Thomas Jones

4,892
26
34

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 Apr 27 '12 at 05:01
See http://jsfiddle.net/6dFm6 for the full code example and http://jsfiddle.net/6dFm6/1/ for when callback is called using callback(). The first doesn't work the second does. – Matt Apr 27 '12 at 05:10
Not exactly sure why, but it has to do with the .remove() at the end. Removing that, and it works. http://jsfiddle.net/6dFm6/4/ My suggestion is to wrap the $(this).remove() call inside the callback to hide, or remove it altogether if possible. – Thomas Jones Apr 27 '12 at 13:30
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? – Matt Apr 29 '12 at 23:10

score 0 · Accepted Answer · edited May 23 '17 at 12:27

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