Timer reset or cancel in JavaScript function clearTimeout:

SQL PHP HTML ASP JavaScript articles and free scripts to download

JavaScript Tutorials

Popular Tutorials

Drop down list

JavaScript Tutorials

Subscribe

Submit your email address and receive article and product notifications. Your email is safe with us.

Resetting the timer funcitons in JavaScript

Here we will learn how to reset the timer function we have studied in part 1 of this tutorial. We can reset or clear the timer before the time out of the timer by using the function clearTimeout(). Here is the general syntax

clearTimeout(mytime)

mytime is the timer id we defined while activating the timer( please see the part 1 of this tutorial). It must be exactly same as one used in setTimeout function as it identify the timer with this.

setTimeout function sets the timer and executes it after the set time, before that if we want to cancel or reset the timer then we must use the clearTimeout function with timer id.

Now we will use the same domo ( in Timer Set of part 1 ) with the additional reset button for the timer. Here is the demo.

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
<input type=button value='Reset Timer' OnClick="clearTimeout(mytime)">

Timer set function Part I

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

Subscribe

Submit your email address and receive article and product notifications. Your email is safe with us.

Scripts

PHP

JavaScript