Question

我正在尝试将使用requestAnimationFrame方法创建的一些动画链接在一起（不使用jQuery）。由于requestAnimationFrame的实现方式，使用setTimeout对连续动画进行计时不会产生所需的结果。因此，我试图用承诺来实现我的目标。

作为一个JavaScript tyro，我仍然在为这整个承诺概念苦苦挣扎。有人可以告诉我为什么下面采取的（公认的天真）方法不起作用？非常感谢提前！

var animation1 = function(){
    var promise = Promise.resolve();
    var t = 0;
    var runAnimation = function(){
        if (t < endValue) {
            t++; 
            // do animation stuff
            requestAnimationFrame(runAnimation)
        }
        else{return promise}
    }
    runAnimation();
}

var animation2 = function(){
    var promise = Promise.resolve();
    var t = 0;
    var runAnimation = function(){
        if (t < endValue) { 
            t++;
            // do animation stuff
            requestAnimationFrame(runAnimation)
        }
        else{return promise}
    }
    runAnimation();
}    

animation1().then(animation2());

Answer 1

您需要从函数

返回Promise

var animation1 = function(){
    return new Promise(function(resolve) {
      var t = 0;
      var runAnimation = function(){
          if (t < endValue) {
              t++; 
              // do animation stuff
              requestAnimationFrame(runAnimation)
          }
          else{resolve()}
      };

      runAnimation();
   });
}

animation2

相同

链接应该是这样的

animation1().then(animation2) //<-- pass function not the result of its invocation

使用promises将动画链接在一起的最简单方法是什么？

1 个答案: