Solved

JavaScript IIFE

Posted on 2015-02-14
8
99 Views
Last Modified: 2015-02-14
Hi All,

I thought an iffe is supposed to execute immediately.  I am starting to think that my concept of the function is wrong.  Please help.  How come below, the alert() inside the IIFE does not execute once I run it?

http://jsfiddle.net/isogunro/bmxh4quq/1/
0
Comment
Question by:Isaac
  • 4
  • 3
8 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
There is nothing to trigger the functions.  In this simple version, I call the first function in 'onload'.  I'm not sure how you 'call' the anonymous function.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Functionz</title>
<script type="text/javascript">
<!--
//To prevent pollution of the global namespace, create an empty object and assign it to a variable.  you can then add members to it.

function vehicle() {
    alert("HELLO VEHCILE");
}

(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());

// -->
</script>
</head>
<body onload="vehicle()">
<h1>JS Functionz</h1>
</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:Isaac
Comment Utility
I thought a immediately invoked function gets called when the page loads without calling it.  Isn't clicking 'Run' in jsfiddle the same as loading?  IIFE is supposed to be different from a regular function or so I thought from my readings.
0
 
LVL 5

Author Comment

by:Isaac
Comment Utility
I'm not talking about the Vehicle() function.  I'm talking about the IIFE
sorry for the confusion.

(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());

Open in new window

0
 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
Turns out that in Firefox at least, 'myapp' is undefined which causes an error that halts the javascript.  This demo with a simpler IIFE works fine.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>JS Functionz</title>
<script type="text/javascript">
<!--
//To prevent pollution of the global namespace, create an empty object and assign it to a variable.  you can then add members to it.

function vehicle() {
    alert("HELLO VEHCILE");
}

/*
(function () {
    this.myApp = myApp || {}; //Creates the namespace object if it does not already exist
    var ns = this.myApp;
    alert("Should see this since it's a IIFE");
    var vehicleCount = 5;
    var vehicles = [];
    ns.Car = function () {};
    ns.Truck = function () {};

    var repair = {
        decription: 'changed spark plugs',
        cost: 100
    };

    alert("Problem: " + repair.description + " Cost: " + repair.cost);

}());
*/

(function(){
  alert("HELLO IIFE"); 
}());

// -->
</script>
</head>
<body onload="vehicle()">
<h1>JS Functionz</h1>
</body>
</html>

Open in new window

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 5

Author Comment

by:Isaac
Comment Utility
Thanks!
Once I defined myApp, it worked.

Working version

http://jsfiddle.net/isogunro/pfgppdr2/2/
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
Comment Utility
Hi,
IE dev tools just show, that Javascript stops right at the moment when you try to assign the undefined object myapp
this.myApp = myApp || {}; //Creates the namespace object if it does not already exist

Open in new window


Fix for this:
simply turn the two objects around:
this.myApp = {} || myApp; //Creates the namespace object if it does not already exist

Open in new window


http://jsfiddle.net/EE_RainerJ/ey2hfvbf/

HTH
Rainer
0
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
You're welcome, glad to help.
0
 
LVL 5

Author Comment

by:Isaac
Comment Utility
Sorry Rainer! Didn't see your comment until I got the email notification and assigned points.  Your suggestion did work though. Thanks!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now