运行延迟后在 jQuery 中运行

Question

所以，基本上我有三个功能，我希望它们一个接一个地运行延迟两秒。

我想实现这样的目标：

firstFunction();
// Two seconds delay
secondFunction();
// Two seconds delay
thirdFunction();
// Two seconds delay
firstFunction();

等等。我尝试了 setInterval、setTimeout、jquery 延迟，到目前为止我一无所获 - 在最好的情况下，所有三个功能同时运行。确切的说，这三个函数的代码都差不多

var active = $(".active.two").removeClass('active');
if (active.next('img') && active.next('img').length) {
    active .next('img').addClass('active');
} else {
    active.siblings(":first-child").addClass('active');
}

如果你能告诉我正确的方向，我将不胜感激。

Answer 1

您可以使用 setInterval 来实现这一点。您可以通过将对函数的引用存储在数组中然后依次调用它们来使其更简单。试试这个：

function funcOne() {
    console.log('one');
}

function funcTwo() {
    console.log('two');
}

function funcThree() {
    console.log('three');
}

var i = 0;
var funcs = [ funcOne, funcTwo, funcThree ];
setInterval(function() {
    funcs[i % funcs.length]();
    i++;
}, 2000);

Example fiddle

Answer 2

假设您的函数是同步的，您希望在每个函数完成后使用 setTimeout() 安排对下一个函数的调用。以下示例将调用每个函数，每次调用之间有 2 秒的延迟。

function firstFunction() {
   $('#log').append('<p>First</p>');
}
function secondFunction() {
   $('#log').append('<p>Second</p>');
}
function thirdFunction() {
   $('#log').append('<p>Third</p>');
}

function callFunctions(function_list, delay) {
  function callNextFunc() {
    if (function_list.length) {
      var nextFunc = function_list.shift();
      nextFunc();
      setTimeout(callNextFunc, delay);
    }
  };
  callNextFunc();
}

var function_list = [firstFunction, secondFunction, thirdFunction];
callFunctions(function_list, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>

运行延迟后在 jQuery 中运行

Running functions in jQuery after delay

jquery

timeout

function

delay

intervals

运行 延迟后在 jQuery 中运行

Running functions in jQuery after delay

jquery

timeout

function

delay

intervals

运行延迟后在 jQuery 中运行