непрерывный перебор массива

222

02 августа 2018, 09:20

Помогите реализовать непрерывный перебор массива, что бы запуск и остановка перебора были по клику. Сейчас, по клику запускается перебор, и на div вешается класс 'markup-lighting' через toggle. Так и нужно, но пробегает длину один раз и все, а мне нужно что бы после нажатия на start-button, происходила итерация постоянно, пока не нажму на другую кнопку, к примеру stop - button.
Код:

var startButton = document.querySelector('.start-button');
startButton.addEventListener("click", movement);
function movement() {
  function markup(i) {
    return function() {
      console.log(i);
      markupLeft[i].classList.toggle('markup-lighting');
    }
  }
  for (var i = 0; i < markupLeft.length; i++) {
    setTimeout(markup(i), i * 100);
  }
}

Answer 1

Решение через setInterval и clearInterval:

// кнопка старт и обработчик клика на нее 
var startButton = document.querySelector('.start-button'); 
startButton.addEventListener("click", start); 
 
// кнопка стоп и обработчик клика на нее 
var stopButton = document.querySelector('.stop-button'); 
stopButton.addEventListener("click", stop); 
 
// идентификатор таймера  
var timerId = null; 
 
// заполним массив пятью элементами `div` (чтобы ваш пример кода работал в сниппете) 
markupLeft = []; 
for (var i = 0; i < 5; i++) { 
  var div = document.body.appendChild(document.createElement('div')); 
  markupLeft.push(div); 
}; 
 
// функция запуска - запоминаем `timerId` (кнопка Start) 
function start() { 
  // если таймер не запущен - запустить, иначе ничего не делать 
  if (!timerId) { 
    console.log('started'); 
    timerId = setInterval(movement, 1000); // через секунду снова запустим 
  } 
} 
 
// функция остановки - останавливаем по `timerId` (кнопка Stop) 
function stop() { 
  // если таймер запущен - остановить, иначе ничего не делать 
  if (timerId) { 
    console.log('stopped'); 
    clearInterval(timerId); // остановить выполенение функции в `setInterval` 
    timerId = null; // обнулить таймер 
  } 
} 
 
// далее ваш старый код без изменений 
function movement() { 
  function markup(i) { 
    return function() { 
      console.log(i); 
      markupLeft[i].classList.toggle('markup-lighting'); 
    } 
  } 
  for (var i = 0; i < markupLeft.length; i++) { 
    setTimeout(markup(i), i * 100); 
  } 
}

<button class="start-button">Start</button> 
<button class="stop-button">Stop</button>

setInterval - запускает выполнение функции и регулярно повторяет её через указанный интервал времени, возвращает числовой идентификатор таймера timerId, который можно использовать для отмены действия. Остановить исполнение можно вызовом clearInterval(timerId).

Answer 2

Для непрерывного можете использовать не for, а while(b), где