Post
Ask Question

How do I use setTimeout() and clearTimeout() in JavaScript?

Introduction 

In this article, we will learn how to use setTimeout() and clearTimeout() in JavaScript. setTimeout is a function that allows us to run the function only once after some time. By using the clearTimeout function, we can cancel the execution of the function.

setTimeout() in JavaScript 

A built-in method in JavaScript called setTimeout() enables you to run a function or a block of code after a predetermined amount of time. (in milliseconds). It gives a distinct identifier that can be used to use clearTimeout to stop the execution of the function after scheduling it to be called after a certain amount of time. The callback function will run after the delay, and the delay time in milliseconds are the two arguments to the setTimeout() function.

syntax 

window.setTimeout(function, milliseconds);

In this method, two parameters are passed. The first parameter specifies the function to be performed, and the second parameter gives the number of milliseconds until execution begins.

example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" style="margin-top:100px">

        <div class="alert alert-success" id="div_id" role="alert">
            After click Submit Button!!
        </div>
        <div class="alert alert-danger" id="div_afterclick" role="alert" style="display: none;">
            Before click Submit Button!!!
        </div>
        <button type="button" id="btn_id" class="btn btn-primary" onclick='startfun()'>Submit</button>
     
    </div>
</body>

</html>

This example uses the setTimeout() function to execution of an anonymous function after a delay of 2000 milliseconds (2 seconds). When the timeout period has passed, the callback function is called, and the div is updated with the string "This will be written after 2 seconds."

   function startfun() {

        setTimeout(function () {

            document.getElementById('div_id').style.display = 'none';
            document.getElementById('div_afterclick').style.display = '';

        }, 2000);

    }

Output

clearTimeout() in Javascript

A built-in JavaScript function called clearTimeout() enables you to remove an already established timeout using the setTimeout() function. It just needs one input, the one-of-a-kind identifier of the timeout you want to cancel, and it halts the execution of the function that was planned to run after the given delay.

syntax

window.clearTimeout(val);

example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container" style="margin-top:100px">

        <div class="alert alert-success" id="div_id" role="alert">
            After click Submit Button!!
        </div>
        <div class="alert alert-danger" id="div_afterclick" role="alert" style="display: none;">
            Before click Submit Button!!!
        </div>
        <button type="button" id="btn_id" class="btn btn-primary" onclick='stopfun();'>stop</button>
    </div>
</body>

</html>

This example uses the setTimeout() function to schedule the execution of an anonymous function after 2000 milliseconds (2 seconds), and the timeover variable is used to store the timeover's unique identity. After that, the anonymous function's execution is halted before the delay has expired by using the timeover argument in a call to clearTimeout().

function stopfun() {
       
         const timeout = setTimeout(function () {

            document.getElementById('div_id').style.display = 'none';
            document.getElementById('div_afterclick').style.display = '';

        }, 2000);
        clearTimeout(timeout);
    }

Output

Conclusion

As you can see in the above article how we implement setTimeout()and clearTimeout()  in Javascript. Follow C# Corner to learn more new and amazing things about Javascript or to explore more technologies. If you have any queries/suggestions on the article, please leave your questions and thoughts in the comment section below.

Thanks for reading, and I hope you like it.


Similar Articles