ClearInterval JavaScript function

What clearInterval() function in javascript does is clear the interval which set by setInterval(). This clearInterval javascript or clearTimeout JavaScript is a method to clear (stop) an interval timer. The clearInterval() Javascript method clears the specified timer and prevents it from triggering additional callbacks.

How clearInterval Javascript works:

For stop, a timer, clearInterval Javascript function is used. The clearInterval() stops the timer created by setinterval(). clearInterval() returns an integer value that can be saved and later use to start a new interval using setinterval(). clearInterval() has clearTimeout function also. clearTimeout is an older version of clearinterval(). cleartimeout takes one parameter which is the time in milliseconds, but clearInterval() does not need any parameters or arguments.

Parameter:

The clearInterval javascript function takes one parameter this parameter is just a variable that stored setInterval in it.

Syntax:

clearInterval(variable)

Example:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        HTML | DOM Windows clearInterval() method
    </title>
</head>
  
<body>
    <button id="btn" onclick="fun()" style="color: blue;">
        Start</button>
    <button id="btn" onclick="stop()">Stop</button>
    <script>
        var setTime ;
  
        function color() {
            if (document.getElementById('btn').style.color == 'blue') {
                document.getElementById('btn').style.color = 'green';
            } else {
                document.getElementById('btn').style.color = 'blue';
            }
  
        }
  
        function fun() {
            setTime = setInterval(color, 3000);
  
        }
  
        function stop() {
            clearInterval(setTime );
        }
    </script>
</body>
  
</html>

The animation on the start button changes every 3 seconds and stays that way for the rest of the time. You can stop it by clicking Stop, which will clear out all intervals so you’ll get one steady color change per second until new ones start again!

What is the setInterval function:

The setInterval is a JavaScript function that executes a given function or code block continuously at fixed intervals of time.

Parameters:

The setInterval() function takes two parameters: the first one is the function to be called, and the second one is the interval in milliseconds between each invocation.

Syntax:

setInterval(Function to be executed, milliseconds)

Example:

<!DOCTYPE html>
<html>
<head>
	<title>
		HTML | DOM Windows clearIntervaljavascript method
	</title>
</head>
<body>
	<button id="btn" onclick="fun()" style="color: blue;">
		GeeksForGeeks</button>
	<button id="btn" onclick="stop()">Stop</button>
	<script>
		var timer;

		function color() {
			if (document.getElementById('btn').style.color == 'blue') {
				document.getElementById('btn').style.color = 'green';
			} else {
				document.getElementById('btn').style.color = 'blue';
			}
		}
		function fun() {
			timer = setInterval(color, 3000);
		}

	</script>
</body>
</html>

The clearTimeout() function:

When you want to execute a function after the given time, use setTimeout(). The number returned by this function is stored in the variable and passed into clearTimout() so that timer can be cleared.

Syntax:

clearTimeout (variable)

Example:

<!DOCTYPE html>
<html>
<head>
	<title>
		HTML | DOM Windows clearTimeout() method
	</title>
</head>
<body>
	<button id="btn" onclick="fun()" style="color: blue;">
		Start</button>
	<button id="btn" onclick="stop()">Stop</button>
	<script>
		var timer ;
		function color() {
	if (document.getElementById('btn').style.color == 'blue') {
	document.getElementById('btn').style.color = 'green';
			} 
       else {
	document.getElementById('btn').style.color = 'blue';
			}

		}

		function fun() {
			timer = setTimeout(color, 3000);
      }
      function stop() {
      			clearTimeout(timer );
      		}
      	</script>
      </body> 
      </html>
     

Conclusion:

The clearInterval JavaScript method clears the specified timer and prevents it from triggering additional callbacks. This is a way to stop an interval timer before its time has expired so that subsequent invocations of the function are ignored. It can be used as a more lightweight alternative to setTimeout(). If you need help understanding how this javascript or javascript code works, let us know by commenting on the comment section! We have experts ready and waiting on our team who can provide assistance in understanding your javascript programme with these methods in mind. What are you waiting for just comment now and tell us about your experience?

Also, Read jQuery when

Follow us on Facebook

Browser Support

Mobile Browsers

ChromeEdgeFirefoxInternet ExplorerOperaSafariNode.js
Full support 45Full support 12Full support
1
Full support
4
Full support
4
Full support
4
Partial supportPartial

Desktop Browsers

WebView AndroidChrome AndroidFirefox AndroidOpera AndroidSafari on iOSSamsung Internet
Full
support
45
Full
support
45
Full
support
4
Full
support
10.1
Full support
14
Full
support
5.0

Also, Read Javascript Create Element Method

Follow us on Facebook

Leave a Comment