Difference between javascript function setTimeout() and setInterval()

Posted at February 23, 2010

Mostly we use javascript function ‘setTimeout()’ and ‘setInterval() ‘ to create timer for various client side animations or to execute the functions after certain interval of time. I have seen javascript programmer using these function but not aware of what exactly the difference is between these two functions. Both of these function takes two parameters , one is function that is required to be executed and other is time interval or delay after which the specified function executes. We can stop the execution of these  two functions  by ‘clearTimeout()’ and ‘clearInterval()’ for setTimeout() and setInterval() function  respectively .

setTimeout()
This function will execute the function (which has been passed as parameter) once  when the time specified has run out.

<script>
var _second = 0;
var c = setTimeout(function(){
                               _second++;
                               alert(_second);
                             } , 1000 );
 
</script>

OR 

<script>
var _second = 0;
function timer()
{
     alert( _second );
}
var c =  setTimeout( timer, 1000 )
</script>

This script will alert ’1′  once  after 1 second when the browser reads the above  script. But if we use setInterval() function instead of setTimeout() , then it will execute the statement every interval miliseconds specified i.e 1000 .  It will keep alerting the number  of seconds after each 1000 millisecond or 1 second interval .  So , if we are required to stop the execution of the setInterval function then we can clear it by using clearInterval() function. For Eg.

SetInterval()

<script>
var _second = 0;
var c = setInterval(function(){
_second++;
alert(_second);
if ( _second == 5 )
{
     clearInterval (c);
}
 
} , 1000 );
</script>

This above script will execute the function after interval of 1 second as soon as browser reads this script . I have used the clearInterval function to make setInterval function stop executing if the conditional statement is met otherwise it will keep alerting the second variable . Above script will alert 1 to 5 after 1 second interval and stops execution.

However we can make setTimeout function act as the setInterval function by calling the setTimeout function again and again and clear the setTimeout function using clearTimeout function . For eg.

setTimeout()  As setInterval()

<script>
var _second = 0;
var c ;
function timer()
{
     alert( ++_second );
     c = setTimeout( function ()
                  {
                     timer();
                     if  ( _second == 5 )
                     clearTimeout (c);
                  }
             , 1000 ) ;
}
 
timer();
</script>

Let me explain the above script. I think it seems little confounding about the variable declaration and use of timer function . I have declared the variable ‘c’ above the timer function because once the’ timer’ function is invoked setTimeout function calls the timer function again after 1 second and then checks for conditional statement and keeps on calling timer function unless the condition staetment is met or clearTimeout function is invoked . If ‘var’  would have been defined just when setTimeout function has been defined then clearTimeout function inside the setTimeout function will not  know about the variable ‘c’. Hence I have declared the variable ‘c’ above to make it global within the script.

I hope this will help get acquainted with  the difference and usage of setTimeout function and setInterval function more clearly .

1,080 views
Javascript

Comments

2 Responses to “Difference between javascript function setTimeout() and setInterval()”

Leave Comment

(required)

(required)