Как остановить рекурсивную функцию в JavaScript?

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