If you are new to web programming, it is a whole new world of ideas and concepts in addition to algorithmic ideas, which you may already be familiar. But you have easy ways to catch up, so don’t worry yet!
This blog post focuses on the challenges of client-side programming when you have to delegate events at specified times, without using sleep() like methods usually available in the traditional programming languages. Read on about client-side programming and challenges of writing code asynchronously.
Introduction to Event-Driven Programming
main-thread of execution of the program belongs to the browser
when you run code like sleep it stops the browser from interacting with the user
user interaction events that involve data procession should be run in separate thread, or asynchronously
callbacks are used to handle user events.
Imagine a office secretary at work. She has to take phone calls, arrange sandwiches for lunch meeting, and pickup the mail and notes for the boss during the morning. She essentially needs to delegate work for others and herself at later time by scheduling tasks.
In pseudo-code we can write the situation when she comes to work as,
//arrive at work @ 8.00AM
schedule a sandwich pickup at 11.00AM, i.e. 3hrs from now schedule mail pickup at 3:30PM, i.e. 7.30hrs while( time < 5.00PM ) continue the phone calls, meetings, etc. if ( time for scheduled events ) do_scheduled events
setTimeout('pickup_sandwich',3*60*1e3);//timeout after 3hrs
Functions – setTimeout and setInterval
The setInterval() method is similar but the execution repeatedly calls the function or script at the end of delay until the interval function is disabled via the clearInterval() call, usually within the function that is repeatedly called.
var interval_id = setInterval('function_or_script_to_execute_delayed()',time_in_ms); //somewhere within the function_or_script code, clearInterval( interval_id );
Example – Delayed Execution
If you want to greet a user on your website after the first 30s they have loaded the page, you can try using the delayed execution,
and saving it as ‘timeout_demo.html’ you should see, the alert dialog box with a message like,
Hello user! Your browser is Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
in your Chrome browser. Other browser information may vary slightly.
Example – Animating a Form Widget
- User clicks ‘clear’, the widget entry is cleared completely
- User clicks ‘run’, we add 20 dots into the widget in addition to whatever is already present
- We delegate the animation code via the setInterval() callback which repeats a function every so-many, user specified, milli-seconds. We will add a ‘.’ every 1s, i.e. 1000ms.
Init fcn Running @ 1 timeout.html:22 Running @ 2 timeout.html:22 Running @ 3 timeout.html:22 Running @ 4 timeout.html:22 Running @ 5 timeout.html:22 ... Running @ 10 timeout.html:22 ... Running @ 20 timeout.html:22
Also clicking the ‘Clear’ button eliminates the 20 dots.