web-dev-qa-db-ja.com

setIntervalを開始および停止/一時停止する方法は？

一時停止してからsetIntervalループを再生しようとしています。

ループを停止した後、 私の試み の「開始」ボタンが機能しないようです：

input = document.getElementById("input");

function start() {
  add = setInterval("input.value++", 1000);
}
start();
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />

これを行うための実用的な方法はありますか？

javascriptjqueryloopssetinterval
23
Web_Designer

この特定の問題が発生する理由：

JSFiddleはコードを関数でラップするため、start()はグローバルスコープで定義されません。

enter image description here

ストーリーの教訓：インラインイベントバインディングを使用しないでください。 addEventListener /attachEventを使用します。

その他の注意事項：

PleasesetTimeoutおよびsetIntervalに文字列を渡さないでください。 evalに変装しています。

代わりに関数を使用し、varと空白を使用して快適になります。

var input = document.getElementById("input"),
  add;

function start() {
  add = setInterval(function() {
    input.value++;
  }, 1000);
}

start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />
17
Matt Ball

jsFiddleのワーキングデモを参照してください：http://jsfiddle.net/qHL8Z/3/

$(function() {
  var timer = null,
    interval = 1000,
    value = 0;

  $("#start").click(function() {
    if (timer !== null) return;
    timer = setInterval(function() {
      $("#input").val(++value);
    }, interval);
  });

  $("#stop").click(function() {
    clearInterval(timer);
    timer = null
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input id="stop" type="button" value="stop" />
<input id="start" type="button" value="start" />
35
jessegavin

このjQueryにタグを付けたので...

まず、入力ボタンにIDを入力し、インラインハンドラーを削除します。

<input type="number" id="input" />
<input type="button" id="stop" value="stop"/>
<input type="button" id="start" value="start"/>

次に、すべての状態と関数をクロージャーにカプセル化してください。

[〜＃〜] edit [〜＃〜]クリーンな実装のために更新され、setInterval()の使用に関する@Esailijaの懸念にも対処。

$(function() {
    var timer = null;
    var input = document.getElementById('input');

    function tick() {
        ++input.value;
        start();        // restart the timer
    };

    function start() {  // use a one-off timer
        timer = setTimeout(tick, 1000);
    };

    function stop() {
        clearTimeout(timer);
    };

    $('#start').bind("click", start); // use .on in jQuery 1.7+
    $('#stop').bind("click", stop);

    start();  // if you want it to auto-start
});

これにより、変数がグローバルスコープにリークすることがなくなり、外部から変更できなくなります。

（更新） http://jsfiddle.net/alnitak/Q6RhG/ で動作するデモ

9
Alnitak

addはグローバル変数ではなくローカル変数です

var add;
var input = document.getElementById("input");

function start() {
  add = setInterval("input.value++", 1000);
}
start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" id="input" />
<input type="button" onclick="clearInterval(add)" value="stop" />
<input type="button" onclick="start()" value="start" />
3
Jazz Man
(function(){
    var i = 0;
    function stop(){
        clearTimeout(i);
    }

    function start(){
        i = setTimeout( timed, 1000 );
    }

    function timed(){
       document.getElementById("input").value++;
       start();
    }

    window.stop = stop;
    window.start = start;
})()

http://jsfiddle.net/TE3Z2/

1
Esailija