In this post, I would introduced the timer executed in client side due to the Sencha/ExtJs Framework. Sencha provides several components in order to implement the timers (definitions from Sencha site):
- Ext.util.TaskRunner: The TaskRunner class is used to execute a function at a specified interval. This is useful when doing polling type operations, for example when reloading Ajax content every 30 seconds.
- Ext.TaskManager: The TaskManager object is a singleton instance of TaskRunner, it can be used for quick access to a TaskRunner
- Ext.util.DelayedTask: The DelayedTask class provides a convenient way to “buffer” the execution of a method. When called, the task will wait the specified time period before executing. If durng that time period, the task is called again, the original call will be cancelled. This continues so that the function is only called a single time for each iteration. This method is especially useful for things like detecting whether a user has finished typing in a text field.
EXAMPLE 1: First, a simple example (from internet) that is the displaying the clock cyclically every 1 second. To illustrate, we will use the above components of Sencha.
Javascript code using TaskRunner:
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
//alert(Ext.Date.format(new Date(), 'g:i:s A' ));
Ext.fly('clock').update(Ext.Date.format(new Date(), 'g:i:s A' ));
},
interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
Javascript code using TaskManager:
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
//alert(Ext.Date.format(new Date(), 'g:i:s A' ));
Ext.fly('clock').update(Ext.Date.format(new Date(), 'g:i:s A' ));
},
interval: 1000 //1 second
}
Ext.TaskManager.start(task);
HTML code:
<body> <div id="clock"></div> </body>
Result:
EXAMPLE 2: In this example, we will use the component Ext.util.DelayedTask. Our timer will wait 5 seconds before display an alert message, however if the user presses a key during that 5000ms, the timer will be cancelled and it will wait another 5000ms.
Javascript:
var task = new Ext.util.DelayedTask(function(){
alert("The User doesn''t press another key, so the timer will be cancelled and the task is finished!");
});
document.onkeydown = function(e) {
task.delay(5000);
return;
};
Result: if the user doesn’t press a key, then the timer will be cancelled and the task is finished. To restart the timer, it is necessary to call “task.delay(5000);” (the user presses another key).
That’s all!
In a future post, I will expose an example more advanced with the use of the components timer/task of Sencha in order to show a progression bar in client side after the submitting of an business action to server.
Huseyin OZVEREN
things, very good examples.
Thank you for this wonderful article. You mentioned that TaskManager is a single instance of Task Runner. Any chance you can have two different active clocks (ones that update every second) in the same program? Please advise. Cheers!