Why should we use Anonymous functions with jQuery instead of the function directly?

Asked

Viewed 523 times

20

I have a question, some methods of jQuery expect a function as parameter, but to work they must receive an Inner Function as parameter instead of a function directly, as in the example below: 

$("a").on("click", function() { retornaNada(); });

instead of 

$("a").on("click", retornaNada());

Consider retornaNada() as a function any type without code body. Why can’t we pass the function directly?

javascript jquery

2 answers

16


Methods waiting for a function await a reference function. For example:

$("a").on("click", retornaNada);

This is advantageous if you want to use the same function as Event Handler in more than one place. For example:

$("a").on("click", retornaNada); 
$("span").on("click", retornaNada);

Passing anonymous functions, it would be necessary to create two different functions.

Now, notice that what you did was:

$("a").on("click", retornaNada()); 
//                  ----------^^

You calling for the function, and actually passed as Handler the return value of it. How retornaNada does not return anything, including the parentheses means the same as:

$("a").on("click", undefined);

That’s why it doesn’t work.

  • Now I understand the problem, actually the expected parameter is not a function but a reference to a function. Even if retornaNada() were retornaUm() { return 1; } the problem would be the same, right?

  • Exactly! Now, if it were function retornaFunc() { return function(){ console.log(this) };} would work, and the clicked element would be logged in to the console. Because then you would be returning a function.

  • 1

    yes @Philippegioseffi the problem would be the same, because javascript can store functions in variables that would be closures, where you would be passing the command to execute it instead of passing the reference itself. Study closures[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures] that you will understand everything you need to know about this. :)

  • 1

    @Pauloroberto, thanks for the link, I will read carefully.

  • @bfavaretto understood your example, now in the matter of performance is it better to use with reference to the function or Anonymous Function? And another how to pass arguments to the function in both cases?

  • @Philippegioseffi There is no practical difference in performance. Only if you place the same event in multiple elements (with multiple calls to .on) you save memory if you always pass a reference to the same function. On passing arguments, deserves a separate question, the answer will not fit in a comment :)

  • @bfavaretto Thanks for the reply on performance. I will create the second question then.

  • @bfavaretto Follows the question: How to pass parameters in function calls by reference in Javascript?.

Show 3 more comments

2

You can send only the name of the function. for example: You declare to Function that you will treat the event before:

function meuOnClick() {
...
}

And then make your jquery point to her:

$("a").on("click", meuOnClick);

Note that it is without parentheses. However, this is a little bad, because you won’t be able to use jquery’s selectors, such as $(this). The normal is to use an anonymous function.

  • I disagree with the final part of your answer. The question of this is a case apart. And there is no "normal".

  • 1

    But where would I use jQuery selector on $("a").on("click", meuOnClick);?

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.