Question

我一直在寻找正确的方法来停止setTimeout调用递归函数。我希望能够重新启动动画而无需等待动画完成。

任何帮助都会很棒！

var viewArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var started = 0;

function animator() {
  if (!started) {
    console.log("Start... ");
    started = 1;
    var i = 0;
    count = 1;

    (function iterator() { // <-- how can I kill this iterator function when the user clicks stop
      document.getElementById("output").innerHTML = viewArray[i];
      if (++i < viewArray.length) {
        setTimeout(iterator, 1000);
        count++
        if (count >= viewArray.length) {
          started = 0;
        } //when animation complete (number reaches 10) allow start animation button to work again 
      }
    })();

  } else {
    console.log("Wait..."); // inactivate button
  }

  started = 1;
}

<div id="output" style="margin: 40px; font-size:130px"></div>
<div style="margin: 40px;">
  <button id="on" onclick="animator();">Start Animation</button>
</div>
<div style="margin: 40px;">
  <button id="off">Stop Animation</button>
</div>

Answer 1

您可以通过状态轻松解决此问题。只需在代码

中添加一个变量即可

  var isRunning = false;

当你开始动画时它到true，而false来停止动画。然后在iterator功能中，检查isRunning是否为false。如果isRunning === false，则不调用下一个setTimeout，因此停止动画。

Answer 2

我可能在你的区间函数之外使用setInterval / clearInterval。当你想到它时，你肯定想要重复的间隔而不是单个超时。

基本上是这样的：

var something;

function start() {
  something = setInterval(interval, 1000);
}

function interval() {
  //animation code
}

function stop() {
  clearInterval(something);
}

如何在JavaScript中停止递归函数？

2 个答案: