EDUCBA

EDUCBA

MENUMENU
  • Blog
  • Free Courses
  • All Courses
  • All in One Bundle
  • Login
Home Software Development Software Development Tutorials Software Development Basics setInterval Function

setInterval Function

Updated April 5, 2023

setInterval Function

Introduction to setInterval Function

There are various instances where a programmer needs to run a set of commands repeatedly after a particular interval of time. So, now running a particular set of commands becomes tough for a coder and requires complex code writing for doing it successfully. Here comes setInterval at the rescue for the javascript coders. Using the simple syntax of the set interval, one can easily execute a set of code or a function repeatedly after a particular time of interval. This makes this method important for every coder who is working on Java script. In this article, we will explain set intervals in detail with different examples and the explanation of their working.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

Syntax:

Below is the basic syntax for setting a setInterval function.

setInterval(function, milliseconds)

for more parameters, the syntax would be:

setInterval(function, milliseconds, parameterA, parameterB, parameterC, ...)

here,

  • the function is required as, without it, setInterval won’t be able to set, and it is a function that you want to execute.
  • milliseconds is also a crucial component as without it also, setInterval won’t be able to set. It is used to set how many times one wants to execute the code; it is basically the intervals. 1000 milliseconds = 1 second.
  • parameters, parameterB, parameterC, … are optional components. These are additional parameters that are passed to the function.

Working of setInterval

Intervals can be set using setInterval() function. setInterval() can be easily defined as a method that enables us to invoke function repeatedly in a defined time period. The setInterval() function works in a very similar way as compared to setTimeout() function. However, they have a slight difference. setTimeout, for instance, works only once, which means that it calls a function or a set of codes only once after the defined time interval, but the setInterval() function calls a function or set of codes again and again after the defined time interval. For example, if we have to display a message on our website for the visitors every 10 minutes. Now, if we apply the setInterval() function, we would successfully execute the desired result making it a good user experience for the users.

Examples of setInterval Function

Following are the examples of setInterval Function are given below:

Example #1

In the below example, basic example of the SetInterval function where an alert is set using the SetInterval function. On clicking the “Take a Ride” button, the SetInterval function is activated, which in return displays an alert in the form of a pop-up that has the message as shown in the output below. And this alert goes on forever.

<!DOCTYPE html>
<html>
<body>
<button onclick="course()">Take a Ride</button>
<p>Visit our Website to Explore new and latest courses and Training Programs. So, click "Take a Ride" button to get a small guided tour.</p>
<script>
var training;
function course() {
training = setInterval(alertFunc, 2000);
}
function alertFunc() {
alert("Lets take a ride to our website. \n www.educba.com \n We have started with text series as well");
}
</script>
</body>
</html>

Output:

  • On Code Execution –

setInterval Function-1

  • On Clicking “Take a Ride” button –

 setInterval Function-2

Example #2

In the below example, the watch and date display is created using the SetInterval function. On executing the code, the Date with time in local IST and also separate time is displayed on the screen.

<!DOCTYPE html>
<html>
<body>
<m>***Date and Time right now are shown below.***</m>
<p>___Also tells the best time to start your training.___</p>
<p id="ree"></p>
<p id="free"></p>
<script>
var EDUCBA = setInterval(watch, 1000);
function watch() {
var A = new Date();
var B = A.toLocaleTimeString();
document.getElementById("ree").innerHTML = A;
document.getElementById("free").innerHTML = B;
}
</script>
</body>
</html>

Output:

setInterval Function-3

Example #3

In the below example, the watch and date display is created using the setInterval function, and it is stopped using the clearInterval function. On executing the code, the Date with time in local IST and also separate time is displayed on the screen. And on clicking the “Let’s Stop” button, both time and date are stopped at that very instance.

<!DOCTYPE html>
<html>
<body>
<m>***Date and Time right now are shown below.***</m>
<p>___Also tells the best time to start your training.___</p>
<p id="ree"></p>
<p id="free"></p>
<button onclick="letsStopTime()">Let's Stop</button>
<script>
var EDUCBA = setInterval(watch, 1000);
function watch() {
var A = new Date();
var B = A.toLocaleTimeString();
document.getElementById("ree").innerHTML = A;
document.getElementById("free").innerHTML = B;
}
function letsStopTime() {
clearInterval(EDUCBA);
}
</script>
</body>
</html>

Output:

setInterval Function-4

Example #4

In the below example, the SetInterval function is used to color a bar in a descending manner. On clicking the “Click to See Outcome” button, the SetInterval function is activated, which in return displays a continuously decreasing bar with an interval of 20 milliseconds until the value reaches 0.

<!DOCTYPE html>
<html>
<style>
#Barbelow {
position: relative;
background-color: #f7e88f;
height: 40px;
width: 600px;
border-color: #bc86e3;
border-width: 200px;
}
#Barabove {
background-color: #d45386;
width: 10px;
height: 40px;
position: absolute;
border-color: #252426;
border-width: 200px;
}
</style>
<body>
<h1>If you don't work hard and smart. You will fall like this.</h1>
<div id="Barbelow">
<div id="Barabove">
</div>
</div>
<br>
<button onclick="EDUCBA()">Click to See Outcome</button>
<script>
function EDUCBA() {
var training = document.getElementById("Barabove");
var width = 100;
var id = setInterval(whole, 20);
function whole() {
if (width == 0) {
clearInterval(id);
} else {
width--;
training.style.width = width + '%';
}
}
}
</script>
</body>
</html>

Output:

  • On code execution –

output-5

On clicking the “Click to See Outcome” button –

 output-6

setInterval Function-7

Conclusion

On the basis of this article, we understood the concept of the set interval. We went through the different examples to understand how to set intervals works and how they can be manipulated according to the requirement of the code. This article would help beginners in understanding the usage of set intervals and implementing it in their own codes.

Recommended Articles

This is a guide to setInterval Function. Here we also discuss the introduction and examples along with the working of setInterval Function. You may also have a look at the following articles to learn more –

  1. JavaScript setInterval
  2. JavaScript Event Handler
  3. JavaScript Countdown
  4. React Native Keep Awake
All in One Excel VBA Bundle
500+ Hours of HD Videos
15 Learning Paths
120+ Courses
Verifiable Certificate of Completion
Lifetime Access
Financial Analyst Masters Training Program
2000+ Hours of HD Videos
43 Learning Paths
550+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Data Science Bundle
2000+ Hour of HD Videos
80 Learning Paths
400+ Courses
Verifiable Certificate of Completion
Lifetime Access
All in One Software Development Bundle
5000+ Hours of HD Videos
149 Learning Paths
1050+ Courses
Verifiable Certificate of Completion
Lifetime Access
Primary Sidebar
All in One Software Development Bundle5000+ Hours of HD Videos | 149 Learning Paths | 1050+ Courses | Verifiable Certificate of Completion | Lifetime Access
Financial Analyst Masters Training Program2000+ Hours of HD Videos | 43 Learning Paths | 550+ Courses | Verifiable Certificate of Completion | Lifetime Access
Footer
About Us
  • Blog
  • Who is EDUCBA?
  • Sign Up
  • Live Classes
  • Certificate from Top Institutions
  • Contact Us
  • Verifiable Certificate
  • Reviews
  • Terms and Conditions
  • Privacy Policy
  •  
Apps
  • iPhone & iPad
  • Android
Resources
  • Free Courses
  • Java Tutorials
  • Python Tutorials
  • All Tutorials
Certification Courses
  • All Courses
  • Software Development Course - All in One Bundle
  • Become a Python Developer
  • Java Course
  • Become a Selenium Automation Tester
  • Become an IoT Developer
  • ASP.NET Course
  • VB.NET Course
  • PHP Course

ISO 10004:2018 & ISO 9001:2015 Certified

© 2023 - EDUCBA. ALL RIGHTS RESERVED. THE CERTIFICATION NAMES ARE THE TRADEMARKS OF THEIR RESPECTIVE OWNERS.

Let’s Get Started

By signing up, you agree to our Terms of Use and Privacy Policy.

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA
Free Software Development Course

Web development, programming languages, Software testing & others

By continuing above step, you agree to our Terms of Use and Privacy Policy.
*Please provide your correct email id. Login details for this Free course will be emailed to you

EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA

*Please provide your correct email id. Login details for this Free course will be emailed to you
EDUCBA Login

Forgot Password?

By signing up, you agree to our Terms of Use and Privacy Policy.

This website or its third-party tools use cookies, which are necessary to its functioning and required to achieve the purposes illustrated in the cookie policy. By closing this banner, scrolling this page, clicking a link or continuing to browse otherwise, you agree to our Privacy Policy

Loading . . .
Quiz
Question:

Answer:

Quiz Result
Total QuestionsCorrect AnswersWrong AnswersPercentage

Explore 1000+ varieties of Mock tests View more