Using JavaScript Timing Events setInterval and setTimeout
Posted By : Kamaldeep Singh | 29-Jun-2015
Using, JavaScript the ability to execute some code at specified time-intervals is called timing events. For this, we use two key methods i.e. setInterval(); and setTimeout();
- setInterval(); -This method executes a function again and again, at custom specified time intervals.
- setTimeout(); -This method executes a function only once, after waiting a specified number of milliseconds.
Note: As these both methods are of HTML DOM Window object hence they are more supported than any other javascript interval. Like we use $interval in angularjs which is not supported in Internet Explorer.
setInterval();
As already told, the setInterval(); will consistently execute a function after specified number of milliseconds. The general syntax for this is :-
setInterval("javascript function", milliseconds);
Here in this, the first parameter indicates a function. And the second one is the duration of time interval for each execution.
Example:-
$scope.load = function() {
console.log(“Function called”);
}
setInterval($scope.load, 10000);
In the above example, setInterval will call the load function after every 10 seconds.
Note: There are 1000 milliseconds in one second.
Stop the Execution of setInterval();
To stop the further execution of setInterval(), clearInterval() method is used. The general syntax for this is :-
clearInterval(intervalVariable);
Here, intervalVariable defines the global variable denoting the setInterval() as:-
Var myVar=setInterval("javascript function", milliseconds);
Now to stop the execution, simply pass the myVar in clearInterval() as :-
clearInterval(myVar);
Example:-
In HTML add a button to stop the interval as:-
<button ng-click="clearInterval()">Stop time</button>
And in your javascript write the function description to stop the interval
$scope.load = function() {
console.log(“Function called”);
}
$scope. clearInterval = function() {
clearInterval(myVar);
}
Var myVar= setInterval($scope.load, 10000);
setTimeout();
As already told, the setTimeout() will executes a function only once, after waiting a specified number of milliseconds. The general syntax for this is :-
setTimeout("javascript function", milliseconds);
Here in this, the first parameter indicates a function. And the second one is the duration of time interval for each execution.
Example:-
In your HTML, you have called a function on button click as:-
<button ng-click = "executeOnce()">Try it once</button>
And in your javascript write the function description to start the timer
$scope.executeOnce = function() {
setTimeout($scope.load, 10000);
}
$scope. load = function() {
console.log(“Function called”);
}
In the above example, on clicking the “Try it once” button, executeOnce function will be called which will set execution time on load function. Now when the executeOnce function will be called, from there load function will be called only once and that too after 10 seconds.
Stop the Execution of setTimeout();
To stop the execution of the function specified in the setTimeout() method, clearTimeout() method is used. The general syntax for this is :-
clearTimeout(intervalVariable);
Here, intervalVariable defines the global variable denoting the setTimeout().
Var myVar=setTimeout("javascript function", milliseconds);
Now to stop the execution, simply pass the myVar in clearTimeout() as :-
clearTimeout(myVar);
Example:-
In HTML add a button to stop the interval as:-
<button ng-click="clearTimeout()">Stop time</button>
And in your javascript write the function description to stop the interval
$scope.load = function() {
console.log(“Function called”);
}
$scope. clearTimeout = function() {
clearTimeout(myVar);
}
Var myVar= setTimeout($scope.load, 10000);
Now in this case, you will be able to stop the execution by calling the clearTimeout() method as the setTimeout() function has not already been executed.
So this was all about using JavaScript Timing Events setInterval(); and setTimeout();. The best example of setInterval(); is the clock. Hope you liked the article. For queries do comment in the comment section.
About Author
Kamaldeep Singh
Kamaldeep is a highly skilled Backend Developer specializing in Java, specifically the Spring framework. He also has extensive knowledge of Javascript and associated frameworks such as Node.js and Express. He possesses a deep understanding of the latest technologies and has hands-on experience with Core Java, Spring Boot, Hibernate, Apache Kafka messaging queue, Redis, as well as both relational databases like MySQL and PostgreSQL and non-relational databases like MongoDB. He has made significant contributions to various projects, including Viral Nation, ExamWorks, TNIBRO, Biogas engineering, SecureNow - Web Application, FB Messenger Chatbot, Dialogflow Chatbot, and Catalyst. Kamaldeep's expertise allows him to seamlessly integrate different technologies into applications, highlighting his adaptability and innovative mindset. His practical experience and strong technical skills make him an invaluable asset to any team.