How to reference an anonymous JavaScript function?

Question

I'm trying to call a Page Method using a jQuery 'attached' event function, in which I like to use the closure to keep the event target local, as below, but page method calls declare several 'error' functions, and I would like to use one function for all of them. If, in the below code, I was handling an error and not success, how could I use my single, anonymous handler for all 3 error functions?

        $(":button").click(function () {
            var button = this;
            PageMethods.DoIt(
                function (a, b, c) {
                    alert(button);
                });
        });

This example passes an anonymous function for the success callback. There is only one of these. If I was passing an error callback, how could I use 'function (e, c, t)' for all 3 error callbacks?

ADDED: What I would like to do here is trigger an AJAX call whenever the user clicks a toggle button (checkbox), but to improve responsiveness, I want to toggle the button state immediately, and only 'untoggle' it if the AJAX call fails.

Now, in my client-side click() event handler, I would like to use anonymous functions inside the scope of click()' so that the functions have access to thethisevent argument, but I don't want to 'declare' three functions for theonTimeout,onError, and 'onAbort arguments of the PageMethods.MyFunction function. if I declare a named function outside of the click handler, it no longer has access to the 'this' parameter of the click() event handler.

Answer 1

I think you can put a variable with name in front of it, like this:

var myFunction = function(a, b, c) { ...

It's been a while I haven't done this but you could give it a try.

Answer 2

You have to assign an anonymous function to a variable using var (always use var, otherwise a variable gets global scope, which may cause unexpected results (e.g., never declare variable i globally)). That's the only way to reference it:

var myFunction = function (a, b, c) {
    /* tum de dum */
};  // don't forget this semicolon

Then you can use this function in different places:

$(":button").click(myFunction);
/* don't put braces after the function name when referencing it,
   else it will be called immediately */

You can find more information about function expressions and function declarations in the article Named function expressions demystified.

Answer 3

You can't. The whole point of an anonymous function is that it has no name and thus cannot be referenced. (In fact, "anonymous" is basically the Greek word for "unnamed".)

If you want to reference it, you need to give it a name.

Answer 4

From inside the anonymous function, you can reference it as arguments.callee (this is how anonymous recursion is achieved).

Answer 5

If your goal is to keep this function out of global scope, use the module pattern:

(function() {
  function asplode() {
    alert('Your head asplode.');
  }

  $('body').click(asplode);
})();

Answer 6

If I understand correctly what you want to do, you may be able to accomplish it like this:

    function handler(a, b, c) {
        alert(this); // button
    }

    $(":button").click(function () {
        var button = this;
        PageMethods.DoIt(function () {
            handler.call(button, a, b, c);
        });
    });