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

Question

我正在尝试暂停然后播放 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" />

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

原文由 Web_Designer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

---

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

---

其他注意事项：

请 不要将字符串传递给 setTimeout 和 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" />

原文由 Matt Ball 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

原文由 jessegavin 发布，翻译遵循 CC BY-SA 4.0 许可协议