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

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)
}

Answer 2

你可以像这样调用函数并设置间隔

   $(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 3

您正在尝试在执行某项操作之前添加延迟。所以更好的方法是调用一个函数并传递选择器和 class 以在那里切换。像这样：

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);

Jquery : 如何在函数后添加延迟

Jquery : How do i add a delay after function

jquery

function

delay