Ans : setInterval एक method है। जिसका use किसी function को कुछ समय के बाद repeat करने के लिए किया जाता है और यह function कभी भी stop नहीं होता है।
setInterval(function_name, numeric_value for time);
Ans : इस method के द्वारा setInterval method को run होने से रोकने के लिए use किया जाता है ।
clearInterval(setInrerval variable name);
HTML Code
<html>
<!--head section-->
<head>
<title>Official Website Teach Coders</title>
<meta name="description" content="Teach Coders" />
<meta name="keywords" content="Teach Coders" />
</head>
<body>
</body>
</html>
----------------------------------------------------------
EXAMPLE 1 : setInterval
----------------------------------------------------------
<script>
var a = 0;
setInterval(timer, 1000);
function timer(){
a= a+1;
document.querySelector(".my-box").innerHTML += a +", ";
}
</script>
----------------------------------------------------------
EXAMPLE 2 : setInterval & clearInterval with condition
----------------------------------------------------------
<script>
var a = 0;
var b = setInterval(timer, 1000); // used setInterval
function timer(){
a= a+1;
// clear interval width condition
if (a > 5){
clearInterval(b) // used clearInterval
document.querySelector(".my-box").innerHTML += "stop";
}
else{
document.querySelector(".my-box").innerHTML += a +", ";
}
}
</script>
Css Code
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
width:500px;
margin:auto;
}
.pastecode{
color: blue;
padding-bottom: 25px;
font-size: 16px;
font-weight: bold;
}
</style>