Wednesday, April 19, 2006

Creating Action Queue for AJAX Calls

In ajax, there are several cases where you need to call a bunch of actions synchronously. That means one action must finish before another one called. You can do it by checking the status of ajax request of previous calls and if that was in finished state, you can call next action. This process may be resource extensive if you dont care for checking. So here is a simple actionChain object which will help to put numbers of actions in a chain (or you better say, queue) and call them one of after one smartly. I just demonstrate how it works

<script>
var actionChain = {
curIndex: 0,
actions: new Array(),
fire: function()
{
if (this.curIndex<this.actions.length)
{
alert(this.actions[this.curIndex]);
this.callback();
}
else
{
alert("finished");
}
},
increase: function()
{
this.curIndex++;
},
addAction: function(actionName)
{
this.actions[this.actions.length] = actionName;
},
initialize: function()
{
this.curIndex=0;
this.actions = new Array();
},
callback: function(){}
}

actionChain.callback=checkVar;

function checkVar()
{
actionChain.increase();
actionChain.fire();
}

for(i=1;i<11;i++)
{
actionChain.addAction("hello"+i);
}
actionChain.fire();
actionChain.initialize();
for(i=1;i<4;i++)
{
actionChain.addAction("hello"+i);
}
actionChain.fire(); </script>


so here you see, an actionChain object is created and then we add some actions. Then we call the fire() method. This fire() method simply invoke callback function with current action in queue. And the call back function just increases the counter. So when the counter reaches at final offset, it will terminate.

Here I show a basic demo, just modifying it a bit you can create your full fledged ajax action chain object ( i mean a proper object which stores the action, their url, parameters and response callback etc...)

Thanks

0 Comments:

Post a Comment

<< Home