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

Question

TakoY @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>

Вопрос задан более трёх лет назад
5193 просмотра

Комментировать

Подписаться 3 Оценить Комментировать

Answer 1 · 2013-12-24 08:03:10

можно так

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

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

Войдите на сайт