1

ボタンのクリックでsetIntervalまたはsetTimeoutを実装するにはどうすればよいですか。以下のコードはループしません。ボタンを2回押したときに停止するにはどうすればよいですか？

<!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>

* jqueryを使用せずに編集

4

2 に答える 2

1

変化する：

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

に：

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

2回目のクリックで間隔をクリアします。

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++);
}

ライブデモ

于 2012-06-27T06:01:46.790 に答える
0 
var i=0;
var timer;
function cycle(){
    // this is how you pass a function to setInterval
    // setInterval returns a int representing the id of the interval
    // EDIT
    if(!timer)
      timer = setInterval(animate,2000);
    else{
      timer = false;
      clearInterval(timer)
}

function animate(){
    alert("task");
    console.log(i++);
    // clearInterval stops a interval, and you have to send as a param the id of that interval
    // EDIT
    // if(i>=1) clearInterval(timer)
}
于 2012-06-27T06:04:57.690 に答える