javascript - 网页动画 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');
            }
        }
    }

};

我的代码变得非常丑陋，因为它逐渐变长。此外，当我有 if else 在队列中运行特定动画时，它几乎不可读。

你有什么建议来解决这个问题吗？

Answer 1

您可以使用 Promises 代替回调。这里有一个示例，您可以看到第二个动画（蓝色框）在第一个动画（红色框）完成后运行：

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

Promise 对象用于异步计算。一个 Promise 代表一个现在可用、将来可用或永远可用的值。更多信息在这里。

可以在此处找到相关的有趣文章：

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