settimeout, delay, setinterval

116

19 ноября 2020, 05:40

Столкнулся с проблемой. Мне необходимо через одинаковые промежутки времени вызвать одну и туже функцию. Точнее. Есть 7 элементов у которых нужно изменять стиль каждые 2 секунды. Т.е. добавляем стиль "active" через 2 секунды убираем его и вызываем эту же функцию, но она уже обращается к следующему элементу и делает тоже самое. Итого 7 элементов. Подскажите, как лучше сделать и оформить интервальные вызовы? Для общего понимания, должна получиться новогодняя гирлянда с мигающими огоньками.

Сейчас примерно выглядит так

  function change (el) {
        el.addClass('active');
        setTimeout(
            function () {
                el.removeClass('active');
            }, 1000);
    }
start.on('click', function () {
change(circleOne);
change(circleTwo);
});

И пока ничего толком не получается) Заранее благодарю.

Answer 1

Например, можно как-нибудь так:

next(document.getElementById('items').children, 0); 
 
function next(items, cur) { 
  items[cur % items.length].classList.add('active'); 
  setTimeout(function() { 
    items[cur % items.length].classList.remove('active'); 
    next(items, cur + 1) 
  }, 2000) 
}

#items div { 
  display: inline-block; 
  height: 10px; 
  width: 10px; 
  background-color: red; 
} 
 
.active { 
  background-color: green !important 
}

<div id="items"> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
  <div></div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Убрать навигацию на предпросмотре в iframe vimeo

на сайте стоит встроенное видео с плеера vimeo

142

HTML

js увеличение отступа left от текущего значения

148

HTML

Плавное изменение размера границы

Я пытаюсь добиться плавного изменения размера границы, как на картинке ниже:

194

HTML

Градиент для одной буквы

Возникла такая проблемка: не могу реализовать градиент только для одной буквы:

132