Javascript Jems - Asynchronous Patterns
Thursday, 22 July 2010
Article Index
Javascript Jems - Asynchronous Patterns
An asynchronous example

Banner

Picture an example

To make things more concrete consider the problem of preloading an image into an Image object:

function getPic()
{
var pictureimage=new Image();
pictureimage.onload=displayPic;
pictureimage.src="/picture.png";
function displayPic()
{
alert("Picture Loaded");
}
}

The main function getPic starts and manages the entire process so you don’t have to go off looking for where the onload event handler is – it’s a member of the getPic object/function.

The Image object created in the first line is local to the getPic function. Notice that it’s always a good idea to set the src property after the event handler’s because this starts the load process and some browsers ignore the event handlers if the image is loaded before they are set. So always set event handlers before starting the process that might trigger the event.

Notice that with the displayPic function defined within the getPic function all of getPic’s variables are available to the inner function even after the outer getPic function has terminated.

For example you can change the alert to:

alert(pictureimage.src);

and the content of the Image object’s property will be retrieved even though the function that the variable “pictureimage” is local to finished some time ago.

The actual flow of control through the getPic function is such that the tread of execution exits after the line:

pictureimage.src="/picture.png";

There is then a long pause when nothing happens within this code while the picture is loaded and only then does execution pickup at the first line of the displayPic function.

You can almost think of this as a “pause while picture loads” pattern. This way of thinking is generally useful in organising asynchronous resource loads.

You can extend this way of thinking to include what happens when the resource isn’t available:

 

function getPic(){
var pictureimage=new Image();
pictureimage.onload=displayPic;
pictureimage.onerror=noPic;
pictureimage.src="/picture.png";
function displayPic()
{
alert(pictureimage.src);
}
function noPic()
{
alert("No Picture");
}
}

Now we have an onerror event handler defined within the outer function and in this case you can think of it as an asynchronous “catch” clause.  If you want to restart the picture load say 3 times then you can once again take advantage of the outer local variables which are still available due to the action of closure:

function getPic()
{
var pictureimage=new Image();
var retryCount=0;
var source="picture.png";
pictureimage.onload=displayPic;
pictureimage.onerror=noPic;
pictureimage.src=source;
function displayPic()
{
alert(pictureimage.src);
}

function noPic()
{
alert(retryCount);
if(retryCount>=3)return;
retryCount++;
pictureimage.src=source;
}
}

In this case the onerror handler tests and increments the retryCount provided by the outer function.

Again there is also the huge benefit that the entire object handling code is grouped together and works together.

Such is the advantage of closure.

The general principle is:

  • always define event handlers as inner functions of any outer functions that they naturally occur in

The only difficulty is in defining what "naturally occur in" means. In most cases it is fairly obvious. It is the outer function where the resource concerned is first loaded. However there are cases where event handlers are easier to write if they have access to data within a particular function and this is their natural home.

Banner


Just JavaScript - In The Beginning Was The Object

JavaScript is a very subtle and sophisticated language and it deserves to be treated in its own right and not as a poor copy of other object-oriented language. In this first chapter of Just JavaScript [ ... ]



Javascript Jems - Lambda expressions

JavaScript has lambda expressions in all but name. Find out how they work and how to use them.


Other Articles

<ASIN:0596517742>

<ASIN:0321572602>

<ASIN:0596806752>

<ASIN:1590597273>

<ASIN:059680279X>

<ASIN:0596805527>




Last Updated ( Monday, 09 August 2010 )
 
 

   
RSS feed of all content
I Programmer - full contents
Copyright © 2014 i-programmer.info. All Rights Reserved.
Joomla! is Free Software released under the GNU/GPL License.