Javascript 如何开始和停止/暂停 setInterval？

How to start and stop/pause setInterval?

提问by Web_Designer

I'm trying to pause and then play a setIntervalloop.

我正在尝试暂停然后播放一个setInterval循环。

After I have stopped the loop, the "start" button in my attemptdoesn't seem to work :

停止循环后，我尝试中的“开始”按钮似乎不起作用：

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" />

Is there a working way to do this?

有没有可行的方法来做到这一点？

采纳答案by Matt Ball

The reason you're seeing this specific problem:

您看到此特定问题的原因：

JSFiddle wraps your code in a function, so start()is not defined in the global scope.

JSFiddle 将您的代码包装在一个函数中，因此start()不在全局范围内定义。

---

---

Moral of the story: don't use inline event bindings. Use addEventListener/attachEvent.

这个故事的寓意：不要使用内联事件绑定。使用addEventListener/ attachEvent。

---

---

Other notes:

其他注意事项：

Pleasedon't pass strings to setTimeoutand setInterval. It's evalin disguise.

请不要将字符串传递给setTimeoutand setInterval。它是eval伪装的。

Use a function instead, and get cozy with varand white space:

改用函数，并使用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" />

回答by jessegavin

See Working Demo on jsFiddle:http://jsfiddle.net/qHL8Z/3/

请参阅 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" />

回答by Alnitak

As you've tagged this jQuery ...

正如你已经标记了这个 jQuery ...

First, put IDs on your input buttons and remove the inline handlers:

首先，将 ID 放在输入按钮上并删除内联处理程序：

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

Then keep all of your state and functions encapsulated in a closure:

然后将所有状态和函数封装在一个闭包中：

EDITupdated for a cleaner implementation, that also addresses @Esailija's concerns about use of setInterval().

编辑更新以获得更清晰的实现，这也解决了 @Esailja 对使用setInterval().

$(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
});

This ensures that none of your variables leak into global scope, and can't be modified from outside.

这确保您的任何变量都不会泄漏到全局范围内，并且无法从外部修改。

(Updated) working demo at http://jsfiddle.net/alnitak/Q6RhG/

（更新）工作演示在http://jsfiddle.net/alnitak/Q6RhG/

回答by Jazz Man

add is a local variable not a global variable try this

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" />

回答by Esailija

(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/

http://jsfiddle.net/TE3Z2/

回答by Diodeus - James MacFarlane

You can't stop a timer function mid-execution. You can only catch it after it completes and prevent it from triggering again.

您无法在执行过程中停止计时器功能。您只能在它完成后捕获它并防止它再次触发。