Home/ Questions/Q 8145741
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T13:45:40+00:00

how can i implement setInterval or setTimeout on click of button. my code bellow

  • 0

how can i implement setInterval or setTimeout on click of button. my code bellow does not loop and how can i stop it on second press of button ? 

<!DOCTYPE HTML>
<html>
  <head>
    <script>
    i=0;
    function cycle(){
        setInterval(animate(),2000);
    }

    function animate(){
        alert("task");
        console.log(i++);
    }           
    </script>

    <style>
    #paper{
        background: #A3C45E;
        width:200px;
        height:300px;
    }
    </style>
  </head>
  <body>
    <input type="button" onClick="cycle()" value="Cycle">
    <div id="paper"></div>
  </body>
</html>

*edit without using jquery

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change:

    setInterval(animate(),2000); // calls the animate function.

    To:

    setInterval(animate,2000); // Pass the function as a reference for reuse.

    Clears the interval on second click:

    var i=0;
var id;

function cycle(){
    if (id){
        clearInterval(id);
        id = null;
    }
    else
        id = setInterval(animate, 2000);
}

function animate(){
    alert("task");
    console.log(i++);
}

    Live DEMO

    • 0