CODEWITHSUNDEEP
javascriptjquery
Elroy Flynn
Elroy Flynn

Reputation: 3218

Understanding this javascript jquery function in function snippet

This is partly a jquery question, but most javascript. I just don't know javascript well enough to understand this code:

1 (function () {
2            $(function () {
3                //Global ajax progress dialog box
4                //Simply run $("#ajax-progress-dialog").dialog("open"); script before the ajax post and
5                //$("#ajax-progress-dialog").dialog("close"); on the ajax post complate
6                $("#ajax-progress-dialog").dialog({
7                    autoOpen: false,
8                    draggable: false,
9                    modal: true,
10                    height: 80,
11                    resizable: false,
12                    title: "Processing, please wait...",
13                    closeOnEscape: false,
14                    open: function () { $(".ui-dialog-titlebar-close").hide(); } // Hide close button
15                });
16            });
17        })();

I understand lines 3-15. In fact, I think I understand lines 2 through 16: this is creating an anonymous function and wrapping it as a jquery object, right? Not sure why it needs to be wrapped, but more importantly, I especially don't understand lines 1: opens with "(function" and 17: closes with ")()". What's that about?

BTW, for completeness, note that this is invoked as follows:

$("#ajax-progress-dialog").dialog("open");

Credit: this example comes from tugberkugurlu

Upvotes: -1

Views: 229

Answers (5)

leemeichin
leemeichin

Reputation: 3379

It's not a jQuery specific thing, but it's called a closure. It means anything you use inside it remains within the scope of that closure, so it won't conflict with code used elsewhere (important when you're using lots of scripts or jQuery plugins).

You might see examples that pass in the window and document parameters, as a document ready equivalent:

(function(document, window) {
    var closure_test = 'Hello world!'

    console.log(window.location.href, closure_test);

})(document, window);

console.log(closure_test);

Run this through Chrome's JS console (or Firebug), and you'll notice that closure_test is accessible inside the closure, but is undefined outside of it.

There's a lot more you can do with it, that your sample code doesn't demonstrate. Eg. using it to imitate a class without using prototypes:

var exClass = (function() {

    function private() {
        return 'I am private';
    }

    // return an object of functions or properties we want to expose
    return {
       public: function() {
           return 'I am publicly accessible';
       }
    }
})();

console.log(exClass.public());
// I am publicly accessible

console.log(exClass.private());
// object has no method 'private'

console.log(private());
// undefined

Notice how you can't get to the function called private, but you can use the one called public().

Upvotes: 0

mbx-mbx
mbx-mbx

Reputation: 1775

This method is used for creating a closure and 'protecting' your variables.

http://jibbering.com/faq/notes/closures/

Upvotes: 0

epascarello
epascarello

Reputation: 207501

It is a self executing function, basically it keeps everything inside of it out of the global scope. Explained in the thread: What is the purpose of a self executing function in javascript?

But in this example code you shown it is not needed. The document ready call of 

$( function(){
    ...
});

does the same exact thing.

Upvotes: 1

TLUL
TLUL

Reputation: 11

When $() is called with an anonymous function, the given anonymous function is called once the DOM is ready. It's a shortcut for $.ready(). See http://api.jquery.com/ready/ for information on it.

As for the first and last lines, I believe it's declaring another anonymous function, and then immediately calling it. I'm not entirely why that would be different from just writing the content of the function, though.

Edit: Kolink is right, that would be used to restrict the scope. However, that doesn't seem to have any benefit in this particular example.

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

It basically creates an anonymous function and runs it immediately. This is useful for creating a closure, for example to run code with var x, y, z without polluting the current (usually global) scope.

Upvotes: 1

Related Questions