What is the role of clearTimeout() function in JavaScript?


If you have set a time using setTimeout() function, then you can clear it using the JavaScript clearTimeout() function.

Example

You can try to run the following code learn how to implement clearTimeout() function in JavaScript −

<html>
   <head>
      <title>JavaScript Animation</title>
      <script>
         <!--
            var imgObj = null;
            var animate ;
            function init() {
               imgObj = document.getElementById('myImage');
               imgObj.style.position= 'relative';
               imgObj.style.left = '0px';
            }
            function moveRight() {
               imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
               animate = setTimeout(moveRight,20); // call moveRight in 20msec
            }
            function stop() {
               clearTimeout(animate);
               imgObj.style.left = '0px';
            }
            window.onload =init;
         //-->
      </script>
   </head>
   <body>
      <form>
         <img id = "myImage" src = "/images/html.gif" />
         <p>Click the buttons below to handle animation</p>
         <input type = "button" value = "Start" onclick = "moveRight();" />
         <input type="button" value="Stop" onclick="stop();" />
      </form>
   </body>
</html>

Updated on: 23-Jun-2020

187 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements