初次接觸Promise異步編程

首先看下面這段動畫的原始的callback寫法：

var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');
    function animate(ball, distance, callback){
        setTimeout(function(){
           var marginLeft = parseInt(ball.style.marginLeft, 10)
           if (marginLeft === distance) {
              callback && callback()
           }
           else {
             if (marginLeft < distance) {
                marginLeft = marginLeft + 2
             } else {
                marginLeft --
             }
             ball.style.marginLeft = marginLeft + 'px'
             animate(ball, distance, callback) 
           }

        }, 13)
    }

    animate(ball1, 100, function(){
        animate(ball2, 200, function(){
            animate(ball3, 300, function(){
              animate(ball3, 150, function(){
                animate(ball2, 150, function(){
                   animate(ball1, 150, function(){
                     //結束
                   })
                })
              })
            })
        })
    })

改爲promise寫法爲：

首先要按裝bluebird依賴 npm install bluebird

var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');
var Promise = window.Promise
    function promiseAnimate(ball, distance){
      return new Promise(function(resolve, reject){
           function _animate(){
             setTimeout(function(){
             var marginLeft = parseInt(ball.style.marginLeft, 10)
             if (marginLeft === distance) {
                resolve && resolve ()
             }
             else {
               if (marginLeft < distance) {
                marginLeft = marginLeft + 3
               } else {
                marginLeft --
               }
               ball.style.marginLeft = marginLeft + 'px'
               _animate() 
             }
         }, 13)
       }
       _animate()
      })
    }
    promiseAnimate(ball1, 100)
     .then(function(){
      return promiseAnimate(ball2, 200)
     })
     .then(function(){
      return promiseAnimate(ball3, 300)
     })
    .then(function(){
      return promiseAnimate(ball3, 150)
     })
     .then(function(){
      return promiseAnimate(ball2, 150)
     })
     .then(function(){
      return promiseAnimate(ball1, 150)
     })