DOM setInterval and clearInterval Methods tutorial in JavaScript

October 10, 2024

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval clearInterval Methods JavaScript</title>
    <link rel="stylesheet" href="css/setInterval_clearInterval_Methods_JavaScript.css">
</head>

<body>
    <div id="test"></div>
    <script src="js/setInterval_clearInterval_Methods_JavaScript.js"></script>
</body>

</html>




Below File is css/setInterval_clearInterval_Methods_JavaScript.css File
#test {
    width: 150px;
    height: 150px;
    background: #ff0000;
}





Below File is js/setInterval_clearInterval_Methods_JavaScript.js File
// setInterval()
// The setInterval() method calls a function at specified intervals (in milliseconds).

// The setInterval() method continues calling the function until clearInterval() is called, or the window is closed.

// 1 second = 1000 milliseconds.

// Syntax :
// setInterval(function, milliseconds, param1, param2, ...)

// clearInterval()
// The clearInterval() method clears a timer set with the setInterval() method.

// Syntax
// clearInterval(intervalId)

var id = setInterval(Anim, 200);

var a = 10;
function Anim() {
    console.log("Hello");
    a = a + 10;
    console.log(a);

    if (a == 200) {
        clearInterval(id);
    }
    else {
        var target = document.getElementById("test");
        target.style.marginLeft = a + "px";
        target.style.width = a + "px";
    }
}