Easy Java Script Timer Code

By Stephen Bucaro

Sometimes you need something to happen after a delay, or you need something to occur repeatedly. This can be accomplished using Java Script timers. To create a single delay you would use the setTimeout method. You could then cancel the timeout with the clearTimeout method. To create a repeating event, you would use the setInterval method. You could then cancel the timer with the clearInterval method.

Single Call

timerID = setTimeout(functionName(),milliseconds)
clearTimeout(timerID)

Repeating Calls

timerID = setInterval(functionName(),milliseconds)
clearInterval(timerID)

My objective in this article is to give you the timer code without surrounding it with a lot of confusing peripheral code so you can quickly use it for your own purposes. For that reason, Ill give you examples of functions that use a timer first. Examples of how to call those functions second. And I'll show you the example function called by the timers last. Lets do a repeating event call first.

<script type="text/javascript">
var timerID;

function startTimer()
{
  timerID = window.setInterval("reverseText()", 2000);
}
</script>

Shown above is a Java Script code block containing a variable to hold the timmer's ID and a function named startTimer that executes the setInterval method, passing it the name of a function to call, reverseText(), after the time interval of 2000 milliseconds (2 seconds). The startTimer function returns the timer's ID which is saved in the variable timerID.

Whatever the reverseText() function does will be repeated every 2000 milliseconds until the clearInterval method is called. Below, I've added a function named stopTimer which calls the clearInterval method, passing it the timerID returned by the setInterval method.

<script type="text/javascript">
var timerID;

function startTimer()
{
  timerID = window.setInterval("reverseText()", 2000);
}

function stopTimer()
{
  window.clearInterval(timerID);
}
</script>

 General Web Design
 HTML
 Graphics Design
 CSS Quick Reference
 Easy Cascading Style Sheets
 Java Script Quick Reference
 Easy Java Script Code
 Web Design Tools
 Coding Issues

RSS Feed