How to Stop a Recursive Function in JavaScript?

Question

I'm stuck looking for the right way to stop a setTimeout call recursive function. I want to be able to restart an animation without having to wait for the animation to finish.

Any help would be awesome!!

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>

Calling setTimeout to set a new timeout for the same function isn't technically a recursive function. — GolezTrol
– GolezTrol, Commented Feb 24, 2016 at 23:32
I have but don't think I'm implementing it correctly. I'm missing something :( — Bridgbro
– Bridgbro, Commented Feb 24, 2016 at 23:32
There is no call to clearTimeout in your code, so yeah, you're missing something. :) Have you stored the timer id returned by setTimeout, so you can pass it to clearTimeout? — GolezTrol
– GolezTrol, Commented Feb 24, 2016 at 23:33
@GolezTrol - The technical term for when a function uses setTimeout to call itself is "recurse-ish". — nnnnnn
– nnnnnn, Commented Feb 24, 2016 at 23:38

Fresheyeball · Accepted Answer · 2016-02-24 23:36:27Z

3

You can easily solve this with state. Simply add a variable to your code called

  var isRunning = false;

which it to true when you start the animation, and false to stop the animation. Then inside your iterator function, check to see if isRunning is false. If isRunning === false, you don't call the next setTimeout, hence stopping the animation.

answered Feb 24, 2016 at 23:36

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jon Swanson · Accepted Answer · 2016-02-24 23:43:44Z

2

I'd probably use setInterval/clearInterval outside your interval function. You definitely want recurring intervals instead of single timeouts when you think about it.

So basically:

var something;

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

function interval() {
  //animation code
}

function stop() {
  clearInterval(something);
}

edited Feb 24, 2016 at 23:43

answered Feb 24, 2016 at 23:38

Jon Swanson

1024 bronze badges

Collectives™ on Stack Overflow

How to Stop a Recursive Function in JavaScript?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related