Как выполнить функции в порядке очереди, в которых содержатся таймеры и анимации?

Question

[TakoY]

Необходимо перебрать в цикле массив функций и выполнить их так, чтобы каждая следующая начиналась после того как полностью завершатся таймеры и анимации предыдущей
К сожалению не смог разобраться с данной задачей

<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

[trushka]

может, так?

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])
    // .....
}

Comments

[TakoY]

нет :)

Answer 2

[lnked]

можно так

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

Comments

[Александр Веселов]

А если нужно рекурсивно всё это делать по нажатию? Как тогда быть? Ведь length=0 в какой-то момент

[demaio]

function f1() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log(1);
      resolve();
    }, 30);
  });
}

function f2() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log(2);
      resolve();
    }, 20);
  });
}

function f3() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      console.log(3);
      resolve();
    }, 10);
  });
}

async function go() {
  await f1();
  await f2();
  await f3();
}
go();

Answer 3

[DrNemo]

боюсь здесь только callback`и помогут

Answer 4

[Александр]

Скорее Deferred.
И про него хорошо написано тут - anton.shevchuk.name/jquery-book (с 83-й страницы)

Comments

[TakoY]

я читал и про Deferred и queue, но так и не смог понять как их приминить конкретно на данной задаче

Answer 5

[Алексей Захаров]

не силен в js, но почему бы не вернуть функцией какое либо значение по выполнении, и далее через

switch (returnedValue) {
    //...
}

Answer 6

[xmeoff]

То, что вам нужно, находится в этой статье.