Как получать элементы массива по очереди по кругу с задержкой?

Question

[FlapJalc]

Написал код который читает данные из массива, и выводит их по очереди с полутора секундной задержкой. Но после того как все данные считываются, мне нужно заново запускать этот цикл. Была идея поместить это всё в while (true), но это оказалось плохой идеей. Пытался гуглить, но меня постоянно кидало на статью по замыканиям. Тут и правда нужно использовать замыкания? Если да, то как

<p>Открыть <b class="slide-words">замок</b></p>

var keys = ['замок', 'машину', 'сейф'];

for (var i = 0; i < keys.length; i++) {
  slideTime(i)
}

function slideTime(j) {
  setTimeout(function() {
    var slideWords = document.querySelector('.slide-words');
    slideWords.textContent = keys[j];
  }, 1500 * j);
}

Answer 1

[0xD34F]

О каком массиве идёт речь, через какой промежуток надо получать его элементы и что с ними делать:

const options = [
  [ 'hello, world!!', 'fuck the world', 'fuck everything' ],
  500,
  (elem => item => elem.textContent = item)
  (document.querySelector('.slide-words')),
];

Можно устанавливать интервал:

function interval(arr, delay, callback) {
  let i = -1;

  return arr.length
    ? setInterval(() => callback(arr[i = -~i % arr.length]), delay)
    : null;
}


const intervalId = interval(...options);
// надо остановить, делаем так: clearInterval(intervalId);

Или воспользоваться рекурсивными таймаутами:

function interval(arr, delay, callback) {
  let timeoutId = null;

  arr.length && (function next(i) {
    timeoutId = setTimeout(() => {
      callback(arr[i]);
      next((i + 1) % arr.length);
    }, delay);
  })(0);

  return () => clearTimeout(timeoutId);
}


const stop = interval.apply(null, options);
// надо остановить, делаем так: stop();

Comments

[FlapJalc]

Вау. Это как я понимаю возможности ES. Пока ещё не добрался до их изучения. Спасибо!

[0xD34F]

Под "ES" вы имеете в виду ES6/7/...? Нет, ничего особенного тут нет, замените let/const на var, стрелочные функции на обычные - всё будет работать точно так же.

[Владимир]

FlapJalc, В своем решении вы используете setTimeout, setInterval из той же оперы, ES тут не при чем.
https://learn.javascript.ru/settimeout-setinterval

[FlapJalc]

0xD34F, Да именно про ES6/7. Тогда это оказывается setInterval такое позволяет производить. Не вникал в него глубоко, так как до изучения методов работы с браузером ещё не добрался.

[FlapJalc]

Владимир, Спасибо!

Answer 2

[alex]

через рекурсию можно