LearnFast.Ninja

How to stop setTimeout in JavaScript using clearTimeout

First you must have setTimout variable. as you know when you define a setTimout you give him name. Now you need to pass this name as parameter to the clearTimeout function. You can copy the working example code. In this example we create setTimout that write seconds to div, then when we click the Stop Timer button it trigger the function that clear the timer.

Main idea: use the function clearTimeout and send as parameter your setTimeout variable. 
clearTimeout(timer);
 
Working example code: 

<html>

<head>

    <title>Example</title>

    <script type="text/javascript">

        function startWrite() {

            var today = new Date();

            document.getElementById('myDiv').innerHTML = today.getSeconds();

            timer = setTimeout('startWrite()', 1000);

        }

 

        function stopWrite() {

            clearTimeout(timer);

        }

    </script>

</head>

 

<body onload="startWrite()">

    <div id="myDiv"></div>

    <input type="button" name="name" value="Stop Timer" onclick="stopWrite()" />

    <input type="button" name="name" value="Start Timer" onclick="startWrite()" />

</body>

</html>
 
Result:


Tags

javascript

cleartimeout timeout settimeout