Как пользователь может сломать JS l oop кнопкой

Question

Как пользователь может остановить все oop, нажав кнопку

Вот что мне нужно сделать в моем l oop:

HTML:

<input type="button" id="stop" value="Stop" />
<input type="button" id="go" value="Go" />
<div id="div"> </div>

Javascript:

document.getElementById('go').addEventListener('click', function(){
    // request to server that return a list of object.

  // for each returned objet, I do another request to the server. like that
  for(let i=0; i < objets.length; i++){
    // request to the server.
    // update the div for progress bar like 1%..2%
  }

});

document.getElementById('stop').addEventListener('click', function(){
    // how to break the loop made by go button
});

Answer 1

Если вы используете простой for (..) l oop, это не может быть остановлено с помощью внешнего воздействия. Все происходит в том же потоке в Javascript, если только ваш код не «заканчивается» в какой-то момент и некоторое время не возвращает управление браузеру, и взаимодействие с пользовательским интерфейсом не может произойти. Самый простой способ получить «l oop» - через setTimeout или setInterval:

interval = null;

startBTN.onclick = function () {
    var i = 0;
    interval = setInterval(function () {
        console.log(i++);  // this is inside your loop
    }, 1);
};

stopBTN.onclick = function () {
    clearInterval(interval);
};