Изменять элемент списка через каждые 5 секунд поочередно

Question

помогите, плиз, с задачей! Имеется туду лист, нужно по клику проверять статус каждой строки промежутками в 5 секунд. Если "pending" - менять этот эдемент на "Done". Сейчас у меня по клику меняются все элементы, а нужно, чтобы по одному и каждые 5 секунд

      <div class="column">
        <ul class="list">
          <li class="elem id">1</li>
          <li class="elem status pending">Pending</li>
        </ul>
      </div>
      <div class="column">
        <ul class="list">
          <li class="elem id">2</li>
          <li class="elem status pending">Pending</li>
        </ul>
      </div>
      <div class="column">
        <ul class="list">
          <li class="elem id">3</li>
          <li class="elem status pending">Pending</li>
        </ul>
      </div>
    </div>
      <div class='btn-block'>
         <button type="button"  id="btn">Check status</button>
      </div>
    </body>
</html>


let interval = setInterval(function () {
      console.log('Check started')
      const myStatus = document.querySelectorAll('.pending')
      for (let i = 0; i <= myStatus.length - 1; i++) {
        if (myStatus[i].innerHTML === 'Pending') {
              myStatus[i].innerHTML = 'Done'
          myStatus[i].style.color = '#85929E'
        } else if (myStatus.length === 0) {
          clearInterval(interval)
        }
      }
    }, 1000)

Answer 1

const myStatus = document.querySelectorAll('.pending');
let i = 0;
let interval = setInterval(function () {
  console.log('Check started')
  if (myStatus[i].innerHTML === 'Pending') {
    myStatus[i].innerHTML = 'Done';
    myStatus[i].style.color = '#85929E';
  } 
  if (++i == myStatus.length) {
    clearInterval(interval);
  }
}, 1000);

Answer 2

Оно?

{
    let buttonCheck = document.querySelector('#button_check');
    let delay = 2000;

    function check(el) {
        console.log('>> check');

        if (el.innerHTML === 'Pending') {
            el.innerHTML = 'Done';
            el.style.color = '#85929E';
        }
    }

    function startCheck(ms) {
        let myStatus = document.querySelectorAll('.pending');
        let i = 0;

        let interval = setTimeout(function timer() {
            check(myStatus[i++]);

            interval = setTimeout(timer, ms);

            if (i >= myStatus.length) {
                clearTimeout(interval);

                console.log('Check stop');
            }
        }, ms);
    }

    buttonCheck.addEventListener('click', () => {
        console.log('Check started');
        startCheck(delay);
    });
}

    <div>
        <div class="column">
            <ul class="list">
                <li class="elem id">1</li>
                <li class="elem status pending">Pending</li>
            </ul>
        </div>
        <div class="column">
            <ul class="list">
                <li class="elem id">2</li>
                <li class="elem status pending">Pending</li>
            </ul>
        </div>
        <div class="column">
            <ul class="list">
                <li class="elem id">2</li>
                <li class="elem status done">Done</li>
            </ul>
        </div>
        <div class="column">
            <ul class="list">
                <li class="elem id">3</li>
                <li class="elem status pending">Pending</li>
            </ul>
        </div>
    </div>
    <div id="button_check" class="btn-block">
        <button type="button" id="btn">Check status</button>
    </div>

БЛОГ НА HUSL

Изменять элемент списка через каждые 5 секунд поочередно

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