CODEWITHSUNDEEP
javascriptjquery
tawheed
tawheed

Reputation: 5821

Self executing Anonymous functions in javascript

In my javascript code, I have a self executing anonymous function which executes immediately. Inside that I have document.ready() which makes sure that the dom is ready before doing stuffs. Just wondering whether the document.ready in my code is redundant or not.

(function() {
"use strict";
var app = {
    init: function () {
        app.addLun('Hello');
        $('#some_id').on('click', this.changeStuff);
    },
    changeStuff: function(e) {
        e.preventDefault();
        $('#some_id').text("Cool text");
    },
    addLun: function(a) {
        console.log(a);
    }
};
$(document).ready(function() {
    app.init();
});
})();

Upvotes: 1

Views: 1479

Answers (4)

HIRA THAKUR
HIRA THAKUR

Reputation: 17757

Answer is No.Its not redundant.

Reason:

  1. Self-invoking functions runs instantly i.e will be executed as soon as it is encountered in the Javascript.
  2. $(document).ready(function() {})(); will trigger only after dom elements are completely constructed.

so basically,there is no point in enclosing $(document).ready(function() {})(); within a (function(){ ... })();.As the former part will wait for all the dom elements to get ready and the later will start execution immediately.

Note:

Now,in case we are using pure javascript and we want to execute something after dom ready,then just load the script before the ending body tag </body>.

REFER THIS LINK

Upvotes: 0

anar khalilov
anar khalilov

Reputation: 17498

If you don't write the $(document).ready part then you will be accessing $('#some_id') inside the init function without waiting for the $(document).ready event, which will not work naturally. With document.ready, it will work though and have the same results as the following code:

$(document).ready(function()
{
    "use strict";

    var app = {
        init: function () {
            app.addLun('Hello');
            $('#some_id').on('click', this.changeStuff);
        },
        changeStuff: function(e) {
            e.preventDefault();
            $('#some_id').text("Cool text");
        },
        addLun: function(a) {
            console.log(a);
        }
    };

    app.init();
});

Upvotes: 0

icktoofay
icktoofay

Reputation: 128991

In general, no. The immediately-invoked function expression will be invoked immediately, whereas $(document).ready can delay execution. If you know that that whole block of code will be executed after the DOM is ready, then sure, it's redundant, but that's probably not the case.

You can, however, replace your immediately-invoked function expression with passing the whole block to $(document).ready, e.g.:

$(document).ready(function() {
    "use strict";
    var app = {
        // ...
    };
    app.init();
});

Upvotes: 1

Blender
Blender

Reputation: 298106

Self-executing anonymous functions and jQuery's ready event handler have nothing to do with one another so no, it's not redundant.

Upvotes: 3

Related Questions