In this session we will learn how to implement timing events in javascript .
- There are two methods used in JavaScript which will help us learn how to implement timing events in javascript :
- setInterval() :- This method will execute every time after specified milliseconds.
window.setInterval(“javascript methodname”,milliseconds);
- setTimeout() :- This method is executed only once after completing the specified interval of time
window.setTimeout(“javascript methodname”,milliseconds);
- Let’s study these methods in detail
- setInterval() function
- The setInterval() method will wait for a given number of milliseconds i.e. it will wait for the number of milliseconds specified in its parameter and after that it will execute the function after every regular intervals as specified .
- Create a new html file and write the following code which will display the current time and date :
- Here is the screen shot of the code :
- Now double click on your html file and you will have following output :
- Here is the explanation of the timer() function used in the code :
- Variable d is used to make the object of the class Date
- Current time is stored in variable t .
- The current date is stored in the variable c through the object d which calls the method of class Date known as toLocaleDateString()
- The next two lines are used to display the current time and date .
- var setTime=setInterval(function(){timer()},500) In this code the setInterval method is used to start the timer after the interval of 500 milliseconds i.e. half seconds.
- Now if we want to stop the time for the function setInterval then we have to use the clearInterval method .
- clearInterval method is used to stop the further execution of setInterval method .
- This can be explained with reference to the above code just by adding a button and stop function which is used to stop the time.
- Here is the screen shot of the updated code with stop functionality :
- Output is shown below :
- setTimeout() function
- The setTimeout method is used to provide an interval for the specified time and is executed only once .
- Here is an example that implements the setTimeout() function :
- Screen shot of the code is given below :
- Now when you double click on your setTimeout.html file you will have the following output :
- Thus we have successfully learnt how to implement timing events in javascript and implemented setInterval() and setTimeout() functions in javascript .
<html> <body> <p>This will show current date</p> <p id="currentDate"></p> <p>This will show the current time and starts the clock:</p> <p id="currentTime"></p> <script> var setTime=setInterval(function(){timer()},500); function timer() { var d=new Date(); var t=d.toLocaleTimeString(); var c=d.toLocaleDateString(); document.getElementById("currentTime").innerHTML=t; document.getElementById("currentDate").innerHTML=c; } </script> </body> </html>
<html> <body> <p>This will show current date</p> <p id="currentDate"></p> <p>This will show the current time and starts the clock:</p> <p id="currentTime"></p> <button onclick="stop()">Stop</button> <script> var setTime=setInterval(function(){timer()},500); function timer() { var d=new Date(); var t=d.toLocaleTimeString(); var c=d.toLocaleDateString(); document.getElementById("currentTime").innerHTML=t; document.getElementById("currentDate").innerHTML=c; } function stop() { clearInterval(setTime); } </script> </body> </html>
<style type="text/css">#submit{ height: 5em; width: 20em; } </style> <script type="text/javascript"> function countDown(secs,elem) { var element = document.getElementById(elem); element.innerHTML = "<h2>Please wait for seconds " +secs+ " seconds</h2>"; if(secs < 1) { //this functions clear the timer clearTimeout(timer); element.innerHTML = '<h2>Tada Countdown Complete</h2>'; } secs--; // executes a function, once, after waiting a specified number of milliseconds var timer = setTimeout('countDown('+secs+',"'+elem+'")',1000); } </script> <div id="status" > <h2><button onclick="countDown(10,'status')" id="submit">Click Me</button></h2> </div>