How to pass parameters to callback function without executing it

Question

I am using this script: https://github.com/goranefbl/jquery.tiny.modal/blob/master/jquery.tinymodal.js

in one of my functions that is fired on button press, this one:

    function fireLightbox(quarter,room_id,otherRoom) {
        $.tinyModal({
            title: "Room is free, want to book now?",
            html: '#bookRoom',
            buttons: ["Book"],
            Book: bookTheRoom(quarter) // <- the issue 
        });
    }

"Book" button that appears inside lightbox above should execute this below function, but its firing immediately when above function loads.

    function bookTheRoom(quarter) {
        console.log(quarter);
    }

I need it ofc. executed once I click on button, not once the first "fireLightbox" function is executed.

Also tried like this, it does not execute it, but also doesn't pass the variable, altho this makes sense to me that its not working

function fireLightbox(quarter,room_id,otherRoom) {
    $.tinyModal({
        title: "Room is free, want to book now?",
        html: '#bookRoom',
        buttons: ["Book"],
        Book: function(quarter) {
            console.log(quarter);
            bookTheRoom(quarter);   
        }
    });
}

Of course function works fine if I call it without () but then I don't have parameters.

@Alexander That's a very elegant solution, unfortunately it won't work in IE < 9 and in iOS Safari < 6 — Gio, Oct 29 '15 at 11:25
@Gio version for old browsers - `$.proxy( bookTheRoom, null, quarter)` — Oleksandr T., Oct 29 '15 at 11:28
it is easy and elegant with arrow functions. ```callback = param => () => callbackFunction(param)``` — Musa, Jun 27 '18 at 21:50

Gio · Accepted Answer · 2015-10-29T11:58:41.930

You could return a function, then the variable you pass in will be available to the inner function through closure.

function bookTheRoom(quarter)
{
    return function()
    {
        console.log(quarter);
    }
}

EDIT - To elaborate a bit: when you call bookTheRoom(quarter), now it doesn't execute the console.log directly. Instead it returns a function that will execute console.log when called. This is a bit like your second solution above, where you associate the "Book" property with a function - the difference being that you do this through a function call, so the function that is executed on a click can access all the variables that were passed to your first function call.

My answer was intended as a "general" solution. In your particular case, since you don't seem to be changing the value of quarter, you don't even need to do this. Your second solution is good enough, just remove the quarter parameter from your function definition, and your inner function will get it from the scope of your outer function, through closure. To be clear, if quarter is not an object and you don't change quarter inside fireLightBox (or even if it is an object and you don't change it anywhere), this would also work:

function fireLightbox(quarter,room_id,otherRoom) {
    $.tinyModal({
        title: "Room is free, want to book now?",
        html: '#bookRoom',
        buttons: ["Book"],
        Book: function() {
            console.log(quarter);
        }
    });
}

Thanks! This is working. Can you explain it a bit more, how that its returning only later on click and not immediately? — Goran Jakovljevic, Oct 29 '15 at 11:36
YES YES YES. Although the question had nothing to do with my problem. This shined a (now obvious) light on why my callbacks were getting called immediately. No duh. Thanks! — cdpalmer, Sep 28 '17 at 20:59

How to pass parameters to callback function without executing it

1 Answers1