1. Technology

JavaScript Execution Order

Determining What JavaScript will run When


Man using desktop PC at desk in office
Maskot/Getty Images

If you are new to JavaScript then the order in which the JavaScript in your page gets run may not be completely obvious. The different pieces of code written in JavaScript can be set up to run at all different times and so we need to consider when we expect each piece of the code to actually be run.

First let's consider all of the different places that we can have JavaScript code in the page.

There are basically three places we can attach JavaScript into a web page - directly in the head of the page, directly in the body of the page, or from an event handler/listener. It doesn't make any difference whether the JavaScript is within the web page itself or is in external files linked to the page as the JavaScript. It also doesn't make any difference whether the event handlers are hard coded into the page or added by the JavaScript itself (except that they can't be triggered before they are added).

So what do I mean when I refer to JavaScript being directly in the head or body of the page? Well basically all of your JavaScript needs to be in one of those two places. What distinguishes between code that is directly in the head or body of the page and code that is not is whether or not the code is contained within functions/objects or not. Code that is within functions and objects will only be run when that function or object is called.

So the code that is directly in the head and body of the web page and not enclosed in functions or objects will run sequentially as soon as the file containing the code has loaded sufficiently for that code to be accessed. Basically this means that whatever code you have in the head and body of your page that is not inside a function or object will run as the page is loading once the page has loaded sufficiently for the line of code to be available to be run. What this means is that any code placed directly in the page that is intended to interact with elements within the page needs to appear further down the page than the elements in the page that it needs to interact with. In general this means that if you want to use direct code to interact with your page content that such code should be placed at the bottom of the body.

Code that is within functions and objects will be run whenever that function or object is called. If it is called from code that is directly in the head or body of the page then its place in the execution order is effectively the spot where the function or object is called from the direct code.

Note that assigning a function to an event handler or listener does not result in the function being run at the point where it is assigned provided that you are actually assigning the function itself and not running the function and assigning the value returned (which would need to be another function). That's why you generally do not see the () on the end of the function name when it is being assigned to an event since the addition of the parentheses to the end would run the function and assign the value returned rather than assigning the function itself.

Functions that are attached to event handlers and listeners will be run when the event that they are attached to is triggered. Most of the events are actually triggered by the visitor to your page interacting with the page but there are a few exceptions such as the load event on the window itself which is triggered when the page finishes loading.

Any functions that are attached to events on elements within the page itself will be dependent on each individual visitor as to when and even if the associated code will be run. The code will only run when the particular event actually occurs to trigger the running of that code. Since that code would generally interact with what your visitor is doing that results in that event being triggered it shouldn't matter if the code never runs for a given visitor since that visitor has obviously not performed the interaction that requires it.

All of this of course assumes that your visitor has accessed your page with a browser that has JavaScript enabled since obviously if their browser doesn't have JavaScript enabled then none of the JavaScript will be run at all (which is why you need to make sure your page is still usable without JavaScript).

One final consideration for when your visitor has their own userscripts installed to interact with your web page. Where that situation applies their scripts will be run after all of your direct code has run and before the code that you have attached to the load event handler. Since your page didn't supply any of that code you have no way of telling what JavaScript may get run against your page from the attached userscript. You just need to accept the fact that such code can be run at that point and that it can overwrite any or all of the code that you have attached to the various events that you have assigned processing to in your page. Where they have overridden event handlers/listeners the response to their triggering those events will be to run the code that they defined to run at that point instead of or in addition to your code. This means that you can't assume that any code that you set up to run after the page has loaded will be allowed to run the way that you have coded it for all of your visitors who have JavaScript enabled. You also need to be aware that some browsers have options that allow some event handlers (eg. the one for the contextmenu) to be disabled within the browser so that their triggering that event will not trigger the corresponding event handler/listener in your code.

  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. JavaScript Execution Order Code and Guide

©2014 About.com. All rights reserved.