javascript - passing callback as a parameter to function

Question

I trying to write a generic function which takes the function and number of milliseconds as argument and it sets it to setTimeout function. I tried like

$("#Delay").click(function() {
    delayCallBack(someFunction(a, b), 100);
});

In delayCallBack function

function delayCallBack(event, time) {
    setTimeout(function() {
        event();
    }, time);
};

But this is not working and throwing me javascript error. Can someone please help me with rite way of doing this ?

Answer 1

Replace

$("#Delay").click(function() {delayCallBack(someFunction(a,b), 100);});

With

$("#Delay").click(function() {delayCallBack(function(){someFunction(a,b)}, 100);});

The first line executes someFunction(a,b) instead of what the second line does, passing a reference to a function to execute.

Answer 2

() invokes a function, so you call the function rather than pass it. Pass the function like normal variable:

$("#Delay").click(function() {
    delayCallBack(someFunction, 100);
});

---

Your function can be cleaned up a little... then again it's not that different from just calling setTimeout directly..

function delayCallBack(callback, time) {
    setTimeout(callback, time);
}

---

To pass the arguments a and b , you can create a new function out of your existing function that partially applies a and b , then pass it:

$("#Delay").click(function() {
    delayCallBack(someFunction.bind(null, a, b), 100);
});

More of .bind . Demo: http://jsfiddle.net/Pd5JZ/2/

Answer 3

This question has a surprisingly tricky answer in JavaScript, since you pass in the values a and b . Consider Gerard Sexton's solution

$("#Delay").click(function() {
    delayCallBack(function() {
                      someFunction(a,b);
                  }, 100);
});

What that code does depends on where a and b are defined and what happens to them after the handler is bound. Suppose we put it in context:

$(function () {
    var a, b;
    a = b = 5;
    $("#Delay").click(function() {
        delayCallBack(function() {
                          someFunction(a,b);
                      }, 100);
    });
    a = b = 7;
}

Then someFunction will be called with a=b=7 , not a=b=5 . If you want the first values, you have to copy the values when you bind the handler. Like so:

$(function () {
    var a, b;

    function bind(a, b) {
        $("#Delay").click(function() {
            delayCallBack(function() {
                              someFunction(a,b);
                          }, 100);
        });
    }

    a = b = 5;
    bind(a, b);
    a = b = 7;
}

Answer 4

I was also getting the same error : setTimeout call (missing quotes around argument?). Gerard Sexton explanation is right.

The correct code should be

$("#Delay").click(function() {delayCallBack(function(){someFunction(a,b)}, 100);});