JavaScript timer function setTimeout(): Reminder option with period button

SQL PHP HTML ASP JavaScript articles and free scripts to download

Timer funcitons in JavaScript: Reminder Script

Timers are used in web pages and we will discuss how to setup one and how to use one with an example. The function setTimeout() in function is used and here is its general syntax.

mytime = setTimeout(expression, msec);

mytime is the identifier used to identify the current timeout function.

expression is the statement that is to be executed after the specified time has ticked off.

msec is the duration of time in milliseconds after which the expression will be executed.

You can see by using setTimeout function we can execute any function or object after a set of time. For example if msec is set 5000 then the expression will be executed after 5 seconds or 5000 milliseconds.

We will try one example where we will have four period buttons and each button will set a different time for another function to execute and display a alert button. We will call it as a reminder script and we will get one alert box based on the period button we clicked. Note that we will be using onclick event of period button for this. Here is the demo and you will get alert message boxe based on the radio button you clicked.

No reminder After 2 Secs After 5 Secs After 10 Secs

Now here is the code to be used inside your head tags

<script type="text/javascript">
function remind(msg1) {
var msg = "This is a reminder after " + msg1 +" Secs";
alert(msg);
}
</script>

This is the code we used for displaying the period buttons

<input type=radio name=rm value=no checked>No reminder
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(2)',2000)">After 2 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(5)',5000)">After 5 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(10)',10000)">After 10 Secs

Now how about adding a reset button to clear the timer before it time outs ? That is in part II of this tutorial

Further readings

Countdown script displaying days , hours , minutes and seconds left from an event
Displaying changing Clock showing date and time in a web page
Timer function to set time for reminder alert
Timer Resetting the timer function
Displaying current date and time alert
Displaying Current Month using getMonth() function
Displaying present Year using getFullYear()
Showing Current Date using getDate() function
Displaying Current Day using getDay() function