Introduction to JavaScript Timing Events
The process of executing a script within a specified time interval, which is also called periodic execution, is facilitated in JavaScript and is called JavaScript Timing Events. It consists of two methods, namely the setInterval() method and setTimeout() method, where the setInterval() method is used to set a delay between the execution of each function. When we are executing a function multiple times, that is, each code is executed after the interval of fixed time between each code execution, and the clearInterval() method is used to exit the execution of setInterval() method and setTimeout() method specifies the period during which the function waits before beginning the execution.
There are two JavaScript timing events. They are:
1. setInterval() method
- setInterval() method is used to set a delay between the execution of each function when we are executing a function multiple times; that is, each code is executed after an interval of fixed time between each code execution.
- The syntax of the setInterval() method in JavaScript is as follows:
2. setInterval(function_name, delay[, arg1, arg2..])
where function_name is the function that is executed again and again with a time delay in milliseconds specified by the delay parameter between each execution.
- Suppose the setInterval() method is included in JavaScript. In that case, a script will not be executed until the time specified in the setInterval() method is lapsed, and this method is useful in JavaScript, which requires the execution of the script again and again.
Examples of JavaScript Timing Events
Different examples are mentioned below:
Example #1
JavaScript program to demonstrate setInterval() method to display the clock to show the current time and update the time as the time proceeds:
Code:
<!DOCTYPE html>
<html>
<body>
<p>The clock is the result of executing the code:</p>
<p id="clocktimer"></p>
<script>
//setInterval() method is used to execute the fucntion clock every second
var var1 = setInterval(clock, 1000);
//date() method is used to obtain today's date and then toLocaleTimeString is used to convert the date to time and setInterval() method runs the function clock for every second to display and update the current time
function clock()
{
var dat = new Date();
document.getElementById("clocktimer").innerHTML=dat.toLocaleTimeString();
}
</script>
</body>
</html>Output:
In the above program, <p> tag is used to display the heading before displaying the clock. Then an id is used to identify the clock. Then setInterval() method is used to execute the function clock every second. Then the date() method is used to obtain today’s date, and then toLocaleTimeString is used to convert the date to time, and the setInterval() method runs the function clock for every second to display and update the current time.
Example #2
JavaScript program to demonstrate setInterval() method and clearInterval() method to display the clock to show the current time and update the time as the time proceeds and to stop the time on clicking the button:
Code:
<!DOCTYPE html>
<html>
<body>
<p>The clock is the result of executing the code:</p>
<p id="clocktimer"></p>
<button onclick="clearInterval(var1)">Stop the clock</button>
<script>
//setInterval() method is used to execute the function clock every second
var var1 = setInterval(clock, 1000);
//date() method is used to obtain today's date and then toLocaleTimeString is used to convert the date to time and setInterval() method runs the function clock for every second to display and update the current time
function clock()
{
var dat = new Date();
document.getElementById("clocktimer").innerHTML=dat.toLocaleTimeString();
}
</script>
</body>
</html>Output:
In the above program, <p> tag is used to display the heading before displaying the clock. Then an id is used to identify the clock. Then clearInterval() method is used to stop the time interval between each function’s execution and stop the clock. Then setInterval() method is used to execute the function clock every second. Then the date() method is used to obtain today’s date, and then toLocaleTimeString is used to convert the date to time, and the setInterval() method runs the function clock for every second to display and update the current time.
1. setTimeOut() method
- setTimeOut() method is used to specify the time in milliseconds that must pass before the execution of a function can begin.
- The syntax of setTimeOut() method in JavaScript is as follows:
2. setTimeOut(function_name, delay[, arg1, arg2..])
where function_name is the function that is executed again and again with a time delay in milliseconds specified by the delay parameter between each execution.
- Suppose the setTimeOut() method is included in JavaScript. In that case, a script will not be executed until the time specified in the setTimeOut() method has lapsed, and this method is useful in JavaScript, which requires the execution of the script after a specified amount of time.
Example #3
JavaScript program to demonstrate setTimeOut() method to display the message by the webpage after waiting for an interval specified in the setTimeout() method when the button is clicked:
Code:
<!DOCTYPE html>
<html>
<body>
<p>Please click on Click Me button and the page displays the welcome message after one second</p>
<button onclick="setTimeout(Welcomemsg, 1000);">Click Me</button>
<script>
//Welcomemsg function displays the message on the page when the button is clicked
function Welcomemsg()
{
alert('Welcome to JavaScript');
}
</script>
</body>
</html>Output:
In the above program, <p> tag is used to display the heading before displaying the Click Me button. Then setTimeOut() method is used on the button, which waits for one second before displaying the welcome message. Then Welcomemsg function displays the message on the page when the button is clicked.
Conclusion
In this tutorial, we understand the concept of Timing Events in JavaScript through definition, syntax, and working of Timing Events in JavaScript through programming examples and their outputs.