Javascript SetInterval Method

The previous lesson of javascript lessons series was about click events and in this lesson we will learn about javascript setInterval method.



Javascript setInterval method is used to call a javascript function repetitively after specific intervals of time. The basic syntax of setInterval method is given below:

init_interval = setInterval(function (){myFunction();}, 1000);

In the above javascript code 1000 equals to 1 second, which means that the function (myFunction) will be called after every 1 second. Now let us write javascript code to show alert message every 1 second:

<script type="text/javascript">
init_interval = setInterval(function (){myFunction();}, 1000);

function myFunction(){
 alert('Hello World!');
}
</script>

The above code will show an alert message every 1 second. It will alert ('Hello World') every 1 second till the browser window is closed. If we want to show the alert message only a few times, we need to clear the interval to. Clearing the interval will stop calling the function which was called every 1 second. To clear the above interval (init_interval), all you have to do is add this line to your code:

<script type="text/javascript">
clearInterval(init_interval);
</script>

If we want the above code to show the alert message only five times, we can do something like this to our code:

<script type="text/javascript">
var count = 0;
init_interval = setInterval(function (){myFunction();}, 1000);

function myFunction(){
 if(count >= 4)
  clearInterval(init_interval);
 alert('Hello World!');
 count++;
}
</script>

In the above code, the interval (init_interval) is cleared after calling the function (myFunction) five times. We can use javascript setInterval method to animate a div back and forth between two points. Check the html and javascript codes to animate a div back and forth between two points:

Html Code:

<div id="animate" style="width:100px;height:50px;background:red;
border:1px solid black;margin-left:0px;"></div>

Javascript Code:

<script type="text/javascript">
var marginleft = 0;
var dir = 'left-to-right';
var div = document.getElementById('animate');
init_interval = setInterval(function (){animateDiv();}, 10);

function animateDiv(){
 if(marginleft < 100 && dir == 'left-to-right')
  marginleft++;
 else if(marginleft == 100 && dir == 'left-to-right')
  dir = 'right-to-left';
 else if(marginleft > 0 && dir == 'right-to-left')
  marginleft--;
 else if(marginleft == 0 && dir == 'right-to-left')
  dir = 'left-to-right';
  
 div.style.marginLeft = marginleft+'px';
}
</script>

In the above javascript code the initial margin of the div we want to animate is set to 0 and direction of animation is from left to right. Then we have used setInterval method to call (animateDiv) function after regular intervals of time. In the (animateDiv) function, we have used if/else statements to decide to increment or decrement the value of marginleft and then assign it to the div.

For more lessons on Javascript subscribe on InformationBitz.com