Jquery: как добавить задержку после функции

Question

Я хочу добавить задержку для 4 имеющихся у меня функций.

Я пытался добавить задержку, как здесь, но это не работает.

$('.navList .li1').toggleClass('li1Active');
$('.navList .li2').delay(2000).toggleClass('li2Active');
$('.navList .li3').delay(2000).toggleClass('li3Active');
$('.navList .li4').delay(2000).toggleClass('li4Active');

Answer 1

Вы можете вызвать такую ​​функцию и установить интервал

   $(document).ready(function() {
     $('.navList .li1').toggleClass('li1Active');
      //create function and call in  setTimeout
     function addActive() {     
      $('.navList .li2').toggleClass('li2Active');
      $('.navList .li3').toggleClass('li3Active');
      $('.navList .li4').toggleClass('li4Active');
     }

     // use setTimeout() to execute
     setTimeout(addActive, 2000);

    });

Answer 2

Вы пытаетесь добавить задержку, прежде чем что-то делать.Поэтому лучший способ - вызвать функцию и передать селектор и класс для переключения там.Вот так:

function addDelay(selector, toggleClass, delay) {
  setTimeout(function () {
    $(selector).toggleClass(toggleClass);
  }, delay);
}

Затем вызовите функцию так:

$('.navList .li1').toggleClass('li1Active');
addDelay('.navList .li2', 'li2Active', 2000);
addDelay('.navList .li3', 'li3Active', 2000);
addDelay('.navList .li4', 'li4Active', 2000);

Answer 3

var elem = document.getElementsByTagName("LI");

for (i = 0; i < elem.length; i++) {
    highlight(elem[i], i*2000);
}

function highlight(elem, timeout) {
  setTimeout(function() {
    $(elem).toggleClass("red");
  }, timeout)
}