Passing anonymous functions through jQuery event call without eventData

Question

Given an <input id="foo"> element, I want to call an existing function on blur and pass an anonymous callback to it.

Case 1, simple function call:

function bar(){
    alert("I am");
}

$("#foo").blur(bar); //Works fine

Case 2, passing arguments/function:

$("#foo").bind("blur", {func: function(){console.log("I am apple")}}, bar);

function bar(event){
    event.data.func(); //Works fine
};

Problem with case 2 is that I'd like to have bar() as a generic function called by more than blur, in which case I would be passing anonymous function directly, not "baked" into a data object. So ideally like this:

function bar(callback){
    //Do stuff
    callback();
}

bar(function(){console.log("Hello Earth")}); //Works

$("#foo").blur(bar(function(){console.log("Hello world")})); //Doesn't work

Last line doesn't work as function gets executed directly, but it's an example of what I would like to achieve. I guess I possibly could make some typeof checks in bar() to determine what I am receiving, but I wanted to ask if there's a cleaner way to pass anonymous function on blur, instead of changing bar().

T.J. Crowder · Accepted Answer · 2016-06-27 13:08:06Z

4

...I wanted to ask if there's a cleaner way to pass anonymous function on blur, instead of changing bar().

Not sure quite what you mean by that, you will have to either change bar or wrap bar.

Changing it:

Make bar a handler generator rather than a direct handler:

function bar(callback) {
    return function(e) {
        // You could use `e` (the event) here and/or pass it on to the callback
        callback();
        // You might use the callback's return, e.g.:
        // return callback();
        // ...if you wanted it to be able to `return false`
    };
}

Now, bar returns an event handler that will call the callback (in addition, presumably, to doing something of its own; otherwise, it's a bit pointless and you'd just pass the callback directly).

Usage:

$("#foo").blur(bar(function(){console.log("Hello world")}));

Wrapping it

If you literally mean you don't want to change bar, you'll need to wrap it:

function wrap(f, callback) {
    return function() {
        // You could call `callback` here instead of later if you like

        // Call the original function passing along the `this` and
        // arguments we received (`arguments` isn't pseudo-code, it's
        // a pseudo-array JavaScript creates for you), get its return value
        var retval = f.apply(this, arguments);

        // Call the callback
        callback();

        // Return the original function's return value
        return retval;
    };
}

If you want to avoid letting errors thrown by callback to make it to the event mechanism, you can wrap it in a try/catch.

Usage:

$("#foo").blur(wrap(bar, function(){console.log("Hello world")}));

edited Jun 27, 2016 at 13:08

answered Jun 27, 2016 at 12:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

pawel Over a year ago

So the question is: "can I do this without changing bar?", and the most voted answer is "just change bar"?

T.J. Crowder Over a year ago

@pawel: I kinda missed that bit at the end of about not changing bar. :-| You're right, it's there. I suspect the OP doesn't mean not changing it at all, but you're right, it's there.

T.J. Crowder Over a year ago

@pawel: I forgot to say "thank you" above. Thank you. :-) I've fixed the answer now.

pawel Over a year ago

No problem, but I still think @Piyush.kapoor solution using .bind for partial application looks cleaner ;)

T.J. Crowder Over a year ago

@pawel: But it changes bar. Ah, I guess it depends which bar you're talking about.

|

Nimbrod · Accepted Answer · 2016-06-28 07:58:29Z

2

function bar(callback){
    //Do stuff
    callback();
}

bar(function(){console.log("Hello Earth")}); //Works

$("#foo").blur(bar.bind(this,function(){console.log("Hello world")})); //Will work

edited Jun 28, 2016 at 7:58

Nimbrod

5711 bronze badges

answered Jun 27, 2016 at 12:44

Piyush.kapoor

6,8311 gold badge25 silver badges21 bronze badges

1 Comment

Nimbrod Over a year ago

Thank you, that worked perfectly! Although it was missing an additional parenthesis before semicolon, I suggested an edit.

eisbehr · Accepted Answer · 2016-06-27 12:44:31Z

0

Wrap it and return it as an anonymous function:

function bar(callback){
    return function() {
        callback();
    }
}

// direct
bar(function(){console.log("Hello Earth")})();

// as callback
$("#foo").blur(bar(function(){console.log("Hello world")}));

answered Jun 27, 2016 at 12:44

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Comments

Vanya Avchyan · Accepted Answer · 2016-06-27 12:56:21Z

0

function bar(){
    alert("I am blur");
}

$("#foo").bind('blur',bar);

answered Jun 27, 2016 at 12:56

Vanya Avchyan

8807 silver badges25 bronze badges

Comments

fdomn-m · Accepted Answer · 2016-06-27 12:57:01Z

0

Last line doesn't work as function gets executed directly

$("#foo").blur(bar(function(){console.log("Hello world")}));

On the last line you're passing the result of bar to the blur() function, not bar itself, it's the same as:

var result = bar(function(){console.log("Hello world")});
$("#foo").blur(result);

The standard method is to wrap this in an anon function:

$("#foo").blur(function() { bar(function(){console.log("Hello world")}) });

This means there are no changes to your other existing functions, as per the question requirement: "instead of changing bar()"

answered Jun 27, 2016 at 12:57

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Collectives™ on Stack Overflow

Passing anonymous functions through jQuery event call without eventData

5 Answers 5

Changing it:

Wrapping it

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Changing it:

Wrapping it

6 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related