Перебор массива в функции по очередно JS

Question

Это выполненная функция

У меня есть массив evens. Как мне заставить функцию работать так чтоб она перебрала каждый элемент с массива по очереди. То есть добавил элементу S класс active потом его удалил и так последующему элементу. Сейчас функция добавляет всем класс active ну и удаляет через 8сек.


    let evens = ['S', 'E', 'I'];

    function shadowF() {
        evens.each( function(i, elem) {

            let play = setInterval(() => {
                $(elem).addClass('active')
            }, 2000);

            setTimeout(() => {
                clearInterval(play);
                $(elem).removeClass('active')
            }, 8000);

        })
    };

Answer 1

let evens = ['S', 'E', 'I'];
let ms = 2000;
for (const item of evens) {
    ms += 2000;
    setTimeout(() => {
        console.log(item);
    }, ms);
}

evens - массив для перебора. ms - миллисекунды, которые будут заданы в таймере, внутри, цикла идет увеличение миллисекунды на 2000, чтобы каждый перебор выводил консоль ровно через 2000 миллисекунды, все что хотите сделать с элементами поочередно, пишите в тело функции, где находится console.log

Answer 2

вам нужен один таймер, который будет считать свои тики, вычисляя на основе номера итерации, к чему применять эффект.

let evens = ['S', 'E', 'I'];

let iIdx = 0;

let h = setInterval(function(){
          $(".letter").removeClass('active');
          let next = iIdx % evens.length;
          let target = "#" + evens[next];

          $(target).addClass('active')
          iIdx++;
        }, 1000);
        
        
setTimeout( function(){
      clearInterval(h);
      $(".letter").removeClass('active');
      console.log('stop');
   }, 20*1000);

span {
   font-size: 2rem;
   font-weight: bold;
   margin: 1rem;
   transition: all .3s all;
}

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="S" class="letter">S</span>
<span id="E" class="letter">E</span>
<span id="I" class="letter">I</span>

БЛОГ НА HUSL

Перебор массива в функции по очередно JS

Ответы (2 шт):