Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Change the Time Interval of setinterval() Method at RunTime using JavaScript ?
The setInterval() method is used to call a particular block of code again and again after a particular interval of time that is given to it in its round braces as parameter. The setInterval() method accepts two parameters, the first is the code that has to be executed again and again while the second is the time in which the code has to be execute again.
In this article, we are going to learn about the methods of changing the time interval of the setInterval() method at the runtime. So that, it will execute the given code at the irregular or variable time interval.
JavaScript provide us two different in-built methods to change the time interval of the setInterval() method as written below −
Using the clearInterval() method.
Using the setTimeout() method.
Let us understand the working and the implementation of these two methods individually in details.
Using the clearInterval() method
The clearInterval() method is used to clear or stop the previously executing setInterval() function. We can use this method to change the time interval of the seInterval() method by calling this function inside the function that s passed to the setInterval() where it will clear the previously called setInterval() method and call the setInterval() with a new time value that we will define in the code.
Syntax
Following syntax will show you how to use the clearInterval() method to clear the previous setInterval() method −
clearInterval( code to be executed, time interval );
Let us understand this method practically and change the time of the setInterval() method using the clearInterval() method in JavaScript.
Algorithm
Step 1 − In the first step, we will add two different buttons in the HTML document where one will be used to start the interval while other is used to stop the interval.
Step 2 − In this step, we will grab all the required elements from the HTML document using their IDs in the JavaScript to perform changes in them.
Step 3 − In the next step, we will define a JavaScript function in which first we use the clearInterval() method to clear the previous setInterval() and then update the time with some new value and call the setInterval() method again with the function we defined in this step.
Step 4 − In the last step, we will define another JavaScript function to stop the execution of the setInterval() using the clearInterval() method.
Example
Below example will help you in understanding the above algorithm practically by diving into the code −
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()"> Start Printing </button>
<button id = "stopbtn" onclick = "stop()"> Stop Printing </button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
clearInterval(interval);
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setInterval(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
In the above example, we used the clearInterval() method to change the time interval of setInterval() method at runtime using JavaScript.
Using setTimeout() method
The setTimeout() method is vary similar to the setInterval() method. It also calls a block of code after a particular interval of time, but unlike of setInterval(), it will execute the code only once instead of executing it again and again. The setTimeout() method stops automatically after executing the code once, so we do not need to call the clearInterval() method to stop executing the previous interval as we need to call it in case of setInterval() method.
Syntax
Follow the below syntax to use the setTimeout() method to change the time interval −
setTimeout( code to be executed, time interval );
Let us now understand the practical implementation of this method with the help of the JavaScript code example.
Algorithm
The algorithm of this method and the previous method is almost same. You just need to perform some minor changes as listed below −
Remove the clearInterval() method from the start() function in previous algorithm.
Set the value of the interval variable with setTimeout() method instead of setInterval() method with the same parameters.
Example
The below example will explain the practical use of the setTimeout method as well as it will help you understand the above changes in the previous algorithm, you need to perform −
<html>
<body>
<h2>Change the Time Interval of setinterval() Method at RunTime using JavaScript</h2>
<p id = "upper">The below text will print after a certain irregular interval of time every time.</p>
<button id = "btn" onclick = "start()">Start Printing</button>
<button id = "stopbtn" onclick = "stop()">Stop Printing</button>
<p id = "print1"> </p>
<p id = "result"> </p>
<p id = "print2"> </p>
<script>
var result = document.getElementById("result");
var upper = document.getElementById("upper");
var printVal1 = document.getElementById("print1");
var printVal2 = document.getElementById("print2");
var interval, t = 500;
function start() {
printVal1.innerHTML = " Printing Starts: ";
result.innerHTML += " Printed after: <b> " + t + " </b> time. <br> ";
t = t * 2;
interval = setTimeout(start, t);
}
function stop() {
printVal2.innerHTML = " Printing Ends. ";
clearInterval(interval);
}
</script>
</body>
</html>
In this example, we have used the setTimeout() method of JavaScript to change the time interval at every call at the runtime using JavaScript.
In this article, we have learned about the two different methods of changing the time interval of the setInterval() method. We have discussed both of these methods in details with the required theory as well as the practical implementation of both with the help of individual code examples for each method.
2K+ Views
