When javascript functions are executed

Question

I think this should be a simple question, but I searched for it and did not find an answer anywhere.

I think I have an html page with some scripts (in the body) like this:

<script type="text/javascript">grf();</script> 

The grf () function is defined in an external .js file. The question arises: is this function executed after the browser has loaded the page AND all its external js files? Or it may happen that the function executes before loading .js files? And if so, how can I prevent this?

Answer 1

To find out if a function is defined:

 // functions are defined or undefined just like regular variables function myFunc() { /*--code here--*/ } // So we just need to see if it defined if( myFunc ) { /*--do something here--*/ } else { /*--wait, retry or w/e--*/ } 

When an external script is detected, (x) html will not be considered further until the external script is read (and the code inside is executed if there is executable code).

Thus, a function call in an external file after the external file has been "included" cannot generate an error not defined by the function. (However, keep in mind that you will get errors if this external function tries to manipulate the DOM or elements that still "do not exist" on the page.)

Answer 2

The function starts when it is encountered. If you want it to start after the page loads, the standard method is to hook the onload event of the window. jQuery has a lot of support for this, but lets you start at ground level:

 <script type="text/javascript">window.onload = function() { grf(); }</script> 

This will stomp on any other load handlers that were previously assigned to the page, so most people use jQuery which is carefully associated with previous handlers:

 <script type="text/javascript">$(document).ready(function() { grf(); });</script> 

Of course, for this second example, you need to add the jQuery libraries further up the page (which sounds like you're not able to do).

Answer 3

The method will be executed since the browser loads the page when it reaches the end of this <script> block. If the external JS file is included in the page lower than where this method is called, it throws an error (the method is not defined).

If you want to wait for the page and assets to load, it is better to use the library. The use of the onload built-in onload limited, since it only supports adding one handler (adding another will be overwritten by the previous one). Here is an example using jQuery :

 <script type="text/javascript"> $(document).ready(function() { //code goes here }); </script> 

Answer 4

As long as the script file is included above the use of the function, the function will be available. The browser will stop rendering when it encounters

 <script src="..."></script> 

tag. It will resume processing the document page only when loading and parsing the script. Therefore, any function defined in the script will be available immediately after:

 <script src="..."></script> <!-- Browser waits until this script is loaded --> <script> foo(); // if function foo was in the script above, it is ALWAYS available now </script> 

This is actually not always the desired behavior - sometimes you do not want to wait for the script to load, as this can make your code slow. One method is to have all scripts load and execute at the bottom of the page before </body> when all the HTML has already been processed.

Answer 5

The browser executes it when it sees the tag. Perhaps not only other scripts have not been loaded yet, the DOM cannot be constructed. However, it is guaranteed that the scripts are executed so that they are displayed in HTML.

If you can use jQuery, it has a $ .ready () function that calls a callback when the DOM is ready, and therefore all scripts are already loaded. Use it like

 $.ready(grf); 

or with an anonymous function, as it is commonly used.

Answer 6

The best way to prevent scripting problems is to use a JavaScript library such as jQuery, Mootools, etc., which make it easy to bind any code to various events (dom.ready, etc.) to make sure everything is fully loaded in advance.