A JavaScript Wrapper for Making Asynchronous Function and Object Method Calls

Bob Clary, Evangelist, Netscape Communications

Published 06 Jun 2003 (Feedback)
Revised 08 Jul 2003

Introduction

Performing asynchronous calls is important in Graphical User Interface programming in general and is even more so when developing complex web applications which perform lengthy operations. Unfortunately, JavaScript™ can make the task of performing asynchronous calls complicated.

The normal means of calling functions asynchronously in JavaScript can be painful and downright impossible if you want to call Object methods asynchronously. See how CCallWrapper simplifies making asynchronous function and Object method calls in Netscape 4.x, Netscape 6, Netscape 7, Mozilla, Gecko-based browsers, Internet Explorer and Opera 7.

CCallWrapper provides an easy to use, cross-browser means of asynchronously calling functions and Object methods which works in Netscape 4.x, Netscape 6, Netscape 7, Mozilla, all Gecko-based browsers, Internet Explorer and Opera™.

Example 1

Performing asynchronous function calls in JavaScript using arguments normally involves constructing the expression argument to setTimeout or setInterval manually.

// Say Hi after a 1 second delay
var hi = 'Howdie Pardner!';
      
function sayHi(message)
{
  alert(message);
}

function doExample1()
{
  setTimeout('sayHi("' + hi + '")', 1000);
}

This example works cross browser in Netscape 7, Mozilla, other Gecko-based browsers, Internet Explorer, Opera, etc.

Example 2

Netscape Navigator 4.x and Gecko-based browsers provide an extension of setTimeout and setInterval where a reference to the function to be called and its arguments can be specified.

// Say Hi after a 1 second delay
var hi = 'Howdie Pardner!';
      
function sayHi(message)
{
  alert(message);
}

function doExample2()
{
  setTimeout(sayHi, 1000, hi);
}

This example works in Netscape 7, Mozilla, other Gecko-based browsers but not in Internet Explorer or Opera.

Example 3

Unfortunately, the extension to setTimeout and setInterval does not work when it comes to making asynchronous calls on Object methods.

function CTalker(name)
{
  this.name = name;
}

CTalker.prototype.talk =
function(message)
{
  alert(this.name + ' says ' + message);
};

function doExample3()
{
  var hi = 'Howdie Pardner!';
  var talker = new CTalker('He who speaks loudly, saying nothing');
  setTimeout(talker.talk, 1000, hi);
}

In Netscape 7, Mozilla and other Gecko-based browsers, this example calls the CTalker.talk method but does not reference the instance used in the call to setTimeout.

While the approach used in Example 1 works cross browser its limitations can make life difficult for Web developers. Example 2 is promising but the lack of cross browsers support and the problem of calling methods as illustrated in Example 3 prevent this extension to setTimeout and setInterval from being more useful.

The JavaScript Object CCallWrapper is designed to work around these problems and make the use of asynchronous calls almost as simple as normal calls.

Script

CCallWrapper.js implements a JavaScript Object CCallWrapper which is used to manage making asynchronous function and method calls.

Constructor

CCallWrapper(Object aObjectReference, Number aDelay, String aMethodName, aArgument0, aArgument1, ..., aArgument9): Constructs an instance of a CCallWrapper object which can be used to execute the aMethodName method/function in the scope of the aObjectReference using up to 10 optional arguments after a delay of aDelay milliseconds.

Class Properties

Number CCallWrapper.mCounter: mCounter is used to track the number of instances of CCallWrapper which have been created and to create unique names for them.
Object CCallWrapper.mPendingCalls: mPendingCalls is a Hash which contains instances of CCallWrapper waiting to be executed.

Class Methods

CCallWrapper.asyncExecute(CCallWrapper callwrapper): asyncExecute is used to asynchronously execute the specified callwrapper.

Properties

String mId: mId is used to obtain a reference to the instance of CCallWrapper maintained in the class property mPendingCalls.
Object mObjectReference: mObjectReference is the scope object used to execute the specified function or method. For example, when the CCallWrapper is executed, mObjectReference[mMethodName](....) will be called.
Object aArgument0, ..., aArgument9: aArgument0, ... ,aArgument9 are the argument values to be passed to the function/method when it is called.
Number mDelay: mDelay is the time interval in milliseconds before the callwrapper is executed.
Number mTimerId: mTimerId is the return value of the setTimeout function used to implement asynchronous calls. It is used by the cancel method.

Methods

execute(): execute() will invoke the wrapped object as this.mObjectReference[this.mMethodName](this.mArgument0, ... , this.mArgument9).
cancel(): cancel() will cancel the pending asynchronous execution of the CCallWrapper.

Example 4

Using CCallWrapper we can revisit Example 3.

function doExample4()
{
  var hi = 'Howdie Pardner!';
  var talker = new CTalker('He who speaks loudly, saying nothing');
  var callwrapper = new CCallWrapper(talker, 1000, 'talk', hi);
  CCallWrapper.asyncExecute(callwrapper);
}

This example works in Netscape 4.x, Netscape 6.x, Netscape 7.x, Mozilla, all Gecko-based browsers, Internet Explorer and Opera 7.

Change Log

2003-07-08: Added mTimerId property and cancel method.

A–+R

Netscape DevEdge

Search