How to execute functions in a queue that contains timers and animations?

Question

JavaScript

It is necessary to go through an array of functions in a loop and execute them so that each next one starts after the timers and animations of the previous one are completely completed
Unfortunately, I could not figure out this task

<button id="d1">111</button>
<button id="d2">222</button>
<button id="d3">333</button>
          
<script  type="text/javascript">

function d1() {
    $('#d1').slideUp(1000).slideDown(1000);
}   
         
function d2() {
    setTimeout(function(){
        $('#d2').hide(1000).show(1000);
    },2000);
}   
function d3() {
    $('#d3').fadeOut(1000).fadeIn(1000);
}  
  
var arf=[d1, d2, d3];  
    
for(var i = 0; i<arf.length; i++) {   
    // .....
}

</script>

Answer 1

maybe so?

function d1(f) {
    $('#d1').slideUp(1000).slideDown(1000, f);
}   
         
function d2(f) {
    setTimeout(function(){
        $('#d2').hide(1000).show(1000, f);
    },2000);
}   
function d3(f) {
    $('#d3').fadeOut(1000).fadeIn(1000, f);
}  
  
var arf=[d1, d2, d3];  
    
for(var i = 0; i<arf.length; i++) { 
    arf[i](arf[i+1])
    // .....
}

Answer 2

maybe so

function d1() {
    $('#d1').slideUp(1000).slideDown(1000);
    cb();
}
         
function d2() {
    setTimeout(function(){
        $('#d2').hide(1000).show(1000);
        cb();
    },2000);
}

function d3() {
    $('#d3').fadeOut(1000).fadeIn(1000);
    cb();
}

var fns = [ d1, d2, d3 ];

function cb()
{
    var fn = fns.shift();
    if( typeof fn == 'function' ) fn.call();
}

cb();

Answer 3

I'm afraid only callback will help here

Answer 4

Rather Deferred.
And it is well written about him here - anton.shevchuk.name/jquery-book (from page 83)

Answer 5

not strong in js, but why not return some value to the function on execution, and then through

switch (returnedValue) {
    //...
}

Answer 6

What you need is in this article .