使用promise对象做异步动画

前面提到使用多层函数嵌套，出现回调地狱的问题，现在借用ES6提供的promise对象，很好的避免了这个问题。
前面讲过的一个简单动画：元素沿着顺时针方向做圆周运动

使用promise对象重新写一遍

Css代码

 <style>
        #box{
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }
    </style>

Html代码

<div id="box"></div>

Js代码

  <script>
    function move(el,attr,val){
        /*el：目标元素
        attr：目标元素样式
        val：目标样式的具体值
        */
        //当前值
        let now = parseFloat(getComputedStyle(el)[attr]);

        // 速度/方向     
        let speed = (val - now) / Math.abs(val - now) *2;

        return new Promise((resolve)=>{
            clearInterval(el.timer);
            el.timer = setInterval(() => {
               if(Math.abs(now-val) <= 0){
                   clearInterval(el.timer);
                   resolve();
                }else{
                   now += speed;
                   el.style[attr] = now + "px";
                 }      
                }, 20);
            });         
        }
        
{
//获取元素
 let box = document.querySelector("#box");

//使用Promise 来完成回调
function boxMove(){
    //下面调用then()方法采用链式写法
    move(box,"left",200).then(()=>{ 
        //注意：这里需要写return，返回promise对象
        return move(box,"top",200)
    }).then(()=>{//此处调用then方法的是上面返回的promise对象
       return move(box,"left",0);
    }).then(()=>{//同上，调用then方法的是由上一步返回的promise对象
        return move(box,"top",0);
    }).then(()=>{
        boxMove();//回调函数
    });
}
    boxMove();//调用函数
}
 </script>