веб-анимация Очередь API

Question

У меня есть анимация, которая, когда одна часть закончена, запускается, и она может быть очень длинной.

Я поставил код здесь: https://jsfiddle.net/homa/qub7ejd1/

Как вы можете видеть, чтобы иметь очереди, у меня есть этот код:

newMessage('HA HA HA HA ....').onfinish = function() { 
    newMessage('Don\'t tell anybody I am here....').onfinish = function() { 
     newMessage('<b>PLEAAAASEEE</b>').onfinish = function() { 
      newMessage('I was very hungry...').onfinish = function() { 
       newMessage('Hello'); 
      } 
     } 
    } 

}; 

Мой код получает действительно очень уродлив, как он постепенно становится все долго. Также, когда у меня есть, если еще запустить конкретную анимацию в очереди, она вряд ли читаема.

У вас есть предложения по решению этой проблемы?

Answer 1

Вы можете использовать Promises вместо обратных вызовов. Пример здесь, как вы можете видеть вторую анимацию (синяя коробка) запустить после первой анимации (красная коробка) была закончена:

https://jsfiddle.net/gibbok/mw23dmzf/

Объект Promise используется для асинхронных вычислений. A Promise представляет значение, которое может быть доступно сейчас или в будущем, или никогда. More info here.

Связанные интересная статья можно найти здесь:

http://danielcwilson.com/blog/2016/03/animations-and-promises/

var box1 = document.getElementById('box1'); 
var box2 = document.getElementById('box2'); 
var animate1 = function() { 
    return animation1 = box1.animate([{ 
    left: '0px' 
    }, { 
    left: '100px' 
    }], 1000); 
}; 
var animate2 = function() { 
    return animation2 = box2.animate([{ 
    top: '150px' 
    }, { 
    top: '250px' 
    }], 1000); 
}; 

function canceledHandler() { 
    console.log('animation1 canceled: ' + Date.now()); 
} 
animate1().finished.then(animate2, canceledHandler);