Click here to Skip to main content
Click here to Skip to main content
Go to top

Asynchronous JavaScript Programming using Humax

, 22 Mar 2008
Rate this:
Please Sign up or sign in to vote.
This article explains how to use asynchronous method invocation pattern in JavaScript using Humax framework version 0.2.1

Download Humax v0.2.1 at http://humax.sourceforge.net for API reference with extensive tutorials.

Pre-requisite

Introduction

Asynchronous operations are typically used to perform long running tasks and tasks which are not expected to be running in the current path of execution. For example, your programm renders two data-intensive grid in different part of the UI by clicking a button. Assume that, you should immediately display one brief message of the operation. In this case, you can use asynchronous pattern for grid rendering part.

Humax introduces asynchronous programming pattern in version 0.2.1. It uses Humax delegates in association with JavaScript's setTimeout method.

A delegate which may either single cast delegate or multicast delegate is required to invoke a method asynchronously. Instead of calling invoke in the delegate, beginInvoke is used to invoke a method asynchronously. In addition to the parameters as the method you want to invoke asynchronously, it has one more parameter (which should come in first ordinal), wich refers the callback method.

The callback executes once the asynchronous call finishes its execution.

AsyncResult

The callback method should have only one parameter of type AsyncResult. It has following methods:

  • getResult(). Returns result of the asynchronous method i.e return value.
  • getSource(). Returns from which object the asynchronous method executed.

Example

Let us have a html page, which gives you the "n"th value of a fibonacci series. It provides one textbox and a button.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Humax Asynchronous Programming</title>
        <script type="text/javascript" src="humax.js"></script>
        <script type="text/javascript">                    
            Humax.require("asyncScript");
        </script>
    </head>
    <body>
        <div>Enter a number to get fibonacci number at this place: <input type="text" id="fibText" />
        <input type="button" id="getButton" onclick="getButton_onclick()" value="Get" /></div>
        <div id="output">Output</div>
    </body>
</html>

In the above code requires a package "asyncScript". It contains the definition of "Fibonacci" class. And the event handler method "getButton_onclick()".

HxTest.Fibonacci = function()
{        
    this.AsyncFibonacci = new Humax.MulticastDelegate("AsyncFibonacci", Function("n",""));
    this.AsyncFibonacci.addTarget(this.getValueAt, this);
}

HxTest.Fibonacci.prototype = 
{        
    getValueAt : function(n)
    {
        if(isNaN(n)) return -1;
        if(n <= 2) return n-1;
        else
        {            
            var nthvalue = 0;
            var n1 = 0;
            var n2 = 1;
            
            for(var i = 3; i <= n; i++)
            {
                nthvalue = n1 + n2;
                n1 = n2;
                n2 = nthvalue;
            }
            
            return nthvalue;
        }
    }    
}

The Fibonacci type contains a method "getValueAt" which receives "n"th number as input and returns value of "n"th fibonacci series. Note that the constructor defines a MulticastDelegate on which the getValueAt is registered.

function getButton_onclick()
{
    var fib = new HxTest.Fibonacci();
    fib.AsyncFibonacci.beginInvoke(fibCallback, parseInt(document.getElementById("fibText").value));
    document.getElementById("output").innerHTML = "Calculating...";    
}

The getButton's onclick event handler create new instance of HxTest.Fibonacci and call AsyncFibonacci asynchronously. In order to get the "n"th value, it declares the fibCallback as callback method. Note that the next code just display "Calculating..." as message in the "output" div.

function fibCallback(asyncResult)
{
    document.getElementById("output").innerHTML = asyncResult.getResult();
}            
        

The fibCallback method receives the instance of Humax.AsyncResult as argument. The Humax assigns result of the method and object source into this instance.

By beginInvoke, now you can get the return value of one or more methods those are added in a Humax.MulticastDelegate.

Note that you can set the delay time of asynchronous invocation by setting Humax.AppConfig.asyncInvokeDelayTime. The system default value is 100 milli seconds.

For more details or your contribution in Humax web framework, visit http://humax.sourceforge.net or
write me to udooz@hotmail.com.

License

This article, along with any associated source code and files, is licensed under The GNU Lesser General Public License (LGPLv3)

Share

About the Author

M Sheik Uduman Ali
Architect Aditi
India India
Working as Architect for Aditi, Chennai, India.
 
My Website: www.udooz.net
 
My Blog: www.udooz.net/blog
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 22 Mar 2008
Article Copyright 2008 by M Sheik Uduman Ali
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid