1

До того, как сработает clearInterval(), всё работает, но после прохождения цикла и очищения интервала, невозможно по новой добавить класс, чтобы замкнуть функцию на бесконечное выполнение. Почему так происходит и как это исправить???

var block = document.querySelectorAll('li'); 
var intervalId;
var counter = 0;

intervalId = setInterval(function() {
    if (counter == block.length) {
        function f1(){
            block[0].classList.remove('active');            
            block[1].classList.remove('active');            
            block[2].classList.remove('active');           
            block[3].classList.remove('active');          
            block[4].classList.remove('active');            
            block[5].classList.remove('active');          
            clearInterval(intervalId);
        }
         f1();
     };

    block[counter].classList.toggle('active');
    counter++;


  
}, 300);
ul {
  margin: 50px auto;
  width: 250px;
}
  
li {
    list-style-type: none;
}
li.active {
      list-style-type: circle;
}
    <ul>
        <li>Первый</li>
        <li>Второй</li>
        <li>Третий</li>
        <li>Четвёртый</li>
        <li>Пятый</li>
        <li>Шестой</li>
      </ul>

1
  • для бесконечного выполнения надо в какой-то момент обнулять counter - см. ответ
    – user176262
    19 дек 2017 в 3:21

1 ответ 1

4

var block = document.querySelectorAll('#mylist > li'); 
var intervalId;
var counter = 0;

intervalId = setInterval(() => {

    if (counter === block.length) {
            block.forEach(b => b.classList.remove('active'));
            counter = 0;
     }else{
         block[counter].classList.toggle('active');
         counter++;
     }
}, 300);
ul {
  margin: 50px auto;
  width: 250px;
}
  
li {
    list-style-type: none;
}
li.active {
      list-style-type: circle;
}
    <ul id='mylist'>
        <li>Первый</li>
        <li>Второй</li>
        <li>Третий</li>
        <li>Четвёртый</li>
        <li>Пятый</li>
        <li>Шестой</li>
      </ul>

4
  • else не обязательно на 10й строчке 19 дек 2017 в 3:32
  • block.forEach(b => b.classList.remove('active')); А что такое b??? Никак не могу понять!
    – Alex
    19 дек 2017 в 10:39
  • 1
    это аргумент функции, которая последовательно получает каждый элемент блока: google.com.ua/… 19 дек 2017 в 13:23
  • 1
    советую посмотреть следующие вещи: функции из array.prototype, object.prototype, библиотека lodash 19 дек 2017 в 13:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.