Running functions in jQuery after delay

Question

So, basically i have three functions and i want them to run one after another with two second delay.

I want to achieve something like:

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

And so on. I tried with setInterval, setTimeout, jquery delay, so far i achieved nothing - on best case scenario, all three functions run at the same time. To be exact, code of these three functions are fairly similar

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

I would appreciate if you could show me the right direction.

duplicate [link](http://stackoverflow.com/questions/4738595/how-do-i-delay-a-function-call-for-5-seconds) — MJ Vakili, Apr 16 '15 at 18:32
`To be exact, code of these three functions are fairly similar` ***>>*** Really sounds like a XY problem, you'd have better to post question regarding your expected behaviour instead of the workaround you think would fit it. If you just want to set `active` class in a cycle to different elements, then post relevant HTML markup in question itself — A. Wolff, Apr 16 '15 at 18:32

score 0 · Accepted Answer · answered Apr 16 '15 at 18:30

You can use setInterval to achieve this. You can make it simpler by storing the references to your functions in an array and then calling them in turn. Try this:

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

Uyghur Lives Matter · Answer 2 · 2015-04-16T18:52:48.810

Assuming your functions are synchronous, you want to schedule a call to the next function using setTimeout() after each function completes. This following example will call each function with a 2 second delay between each call.

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>

This answer is completely valid, but i found a little simpler solution, but thanks a lot! — Zamoyski, Apr 16 '15 at 19:15
@user3323095 Fair enough. If you had long running functions, then there would be a difference between this answer and [Rory](http://stackoverflow.com/users/519413/rory-mccrossan)'s [setInterval()](http://stackoverflow.com/a/29683140/369450); otherwise yes, his is much simpler. — Uyghur Lives Matter, Apr 16 '15 at 20:32

Running functions in jQuery after delay

2 Answers2