Timer reset or cancel in JavaScript function clearTimeout:

SQL PHP HTML ASP JavaScript articles and free scripts to download

If you are facing any problem in viewing this page, please tell us

JavaScript String Array Date & Time Form Validation Event handling Math basic loop

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
Recursive timer to trigger a code block after a particular interval
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

Sections

Date & Time

Date & Time getMonth() getFullYear() getDate() getDay() Timer Timer Reset Recursive Timer Countdown Clock

Subscribe

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