1

我有一个场景，我正在尝试使用 Promise (bluebird) 将 web 动画链接在一起。

网络动画是指element.animate风格的动画。我创建了一个通用的 Animation Promise 包装器，如下所示：

function promiseAnimation(element, keyframes, timing) {
  return new Promise(function(resolve, reject) {
    element.animate(keyframes , timing).onfinish = function(e) {
      resolve();
    }
  });
}

然后我将一个元素、数组和计时对象传递给该函数。动画执行，promise 解决。唯一的问题是最终结果看起来有点难看......

promiseAnimation(element, keyframe1, timing1 ).then(function(){
  //isn't this just as bad as callbacks?
  promiseAnimation(element, keyframe2, timing2 ).then(function(){
    alert('lolz');
  });
});

为什么丑？因为它基本上看起来像回调。将其中的五个链接在一起，似乎会留下一个不可读的代码块——这与Promise似乎……承诺的内容背道而驰。

我想另一种选择是返回一个函数，而不是一个承诺并明确执行它，给我留下这样的东西：

promiseAnimation(blah,blah)()
  .then(promiseAnimation(blah,blah))

但这似乎也不理想。什么是实现干净的承诺链的最干净的方法，同时确保.then动画完成时唯一的执行？

你可以在这里看到我的代码：http: //codepen.io/anon/pen/ONbXdx

4

0 回答 0