JSFiddle - React, Tailwind, and code Playground

by finom

HTML

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="info"></div>

CSS

div {
    width: 40px;
    height: 40px; 
    position: absolute;
}

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
    left: 45px;
}
#div3 {
    background-color: blue;
    left: 90px;
}

#info {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
}

JavaScript

(function(){
    wait = function(first){
        return new(function(){
            var self = this;
            
            var callback = function(){
                var args;
                if(self.deferred.length) {
                    args = [].slice.call(arguments);
                    args.unshift(callback);
                    self.deferred[0].apply(self, args);
                    self.deferred.shift();
                }
            }
            
            this.wait = function(run){
                this.deferred.push(run);
                return self;
            }
            
            this.deferred = [];
            
            first(callback);
        });
    }    
    
   var log = function(text){
        $('#info').prepend(text + '<br>');
   }    
    
    /* Пример */
    wait(function(runNext){
        log('Первая анимация пошла');
        
        $('#div1').animate({
            top: 30
        }, 1000, function(){
            runNext(1,2); //передаем какие-нибудь аргументы в следующий вызов
        });
        
    }).wait(function(runNext, a, b){
        log('Вторая анимация пошла, a='+a+' b='+b ); //используем аргументы из предыдущего вызова
        
        $('#div2').animate({
            top: 50
        }, 1000, runNext);
        
    }).wait(function(runNext){
        log('Ждем две секунды');
        
        setTimeout(function(){
            log('Две секунды прошли')
            runNext();
        }, 1000);
        
    }).wait(function(runNext){
        log('Третья анимация пошла');
        
        $('#div3').animate({
            left: 50
        }, 1000, runNext);
        
    }).wait(function(runNext){
        log('Последняя анимация');
        
        $('#div1').animate({
            top: 0,
            left: 45
        }, 1000, runNext);
        
    }).wait(function(){
        log('Закончили');
        
    });
})();