块函数在javascript中作为参数传递时运行

Question

var event = function(id) {
    alert(id);
}

textProgressBar.generator('20', text1, event("test"));

this.generator = function (percentage, text, event, type) {
    ....
    $(this.id).children().last().on('click', event);
}

I want to run function when it is clicked. But it's function run when page is loaded.

textProgressBar.generator('20', text1, event("test"));

If I pass the parameter to event function, it run when page is loaded.

How can I block this function when page is loaded?

Answer 1

This line:

textProgressBar.generator('20', text1, event("test"));

calls event and passes its return value into textProgressBar.generator , exactly the way foo(bar()) calls bar and passes its return value into foo .

If you want to pass the function into generator , you'll need to pass a function reference rather than calling the function.

Two ways to do that:

1. A wrapper function:

    textProgressBar.generator('20', text1, function() { event("test"); }); 

   There, we create a function (an anonymous one) that, when caled, will call event passing in "test" as an argument.

2. Function#bind :

    textProgressBar.generator('20', text1, event.bind(null, "test")); 

   Function#bind creates a new function that, when called, will call the original with a given this value ( null in my example) and any arguments you give bind ( "test" in my example).