JavaScript回调函数的区别

Question

I would like to know the difference between 2 implementations of callback functions.

This:

$("#button").on('click', function () {
            //do something
});

Versus having the function already defined.

$("#button").on('click', btnFunction);
function btnFunction() {
    //do something
}

Are there any implications with one compared to another? Performance-wise is one faster?

Answer 1

The first uses an anonymous function and the second does not. There's no difference in both.

See: Why do you need to invoke an anonymous function on the same line?

Answer 2

Some folks prefer the second form because it gives a function name when using the debugger and tracing, but there are ways to get the same functionality in the first form.

If you are attaching and removing the event handler based on changing conditions, the second form is much easier to maintain, however.

Answer 3

There's no difference at all, and there's no performance issue with neither one of them. The only difference is that in one of them you're defining the callback function as an anonymous function, this way you cannot reuse it.

The other way, where you define it else where and named it and then pass it as a callback, you're defining a function that you can later reuse in another part of your code.

For example: if you want to do something when the document is ready, and then do se exact same thing when some one press a button you can use something like this:

function getData() {
    //do something
}

$(function() {
    // Call the function once the DOM is ready
    getData();
});

// Call the same function when the button is clicked
$("#refresh_button").on('click', getData);

Answer 4

In most cases the first one will be used, called Anonymous Functions

The second one will be used when the function is not only used inlined here, but also needs to be reused somewhere else.

But anyway it could be a personal preference.

Answer 5

您可以看到的唯一真正的区别是，使用第二个堆栈跟踪时（例如，如果引发了异常）堆栈跟踪会更好，即更易于调试。

Answer 6

Just reuse-ability.

In the second case, you could call btnFunction() somewhere else if need be.