                        课程
                    
                        /前端开发
                        
                            /Node.js
                        
                        /进击Node.js基础（二）

使用老师讲的第一种方法.最后演示结果很奇怪:第一个小球缓慢移动到100px的位置,但是第二个第三个小球就直接移动过去了,没有中间循序渐进的过程,请问是咋回事?

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>promise animation</title>
   <style>
       .ball{
           width: 40px;
           height: 40px;
           border-radius: 50%;
       }
       .ball1{
           background: lightgreen;
       }
       .ball2{
           background: pink;
       }
       .ball3{
           background: lightblue;
       }
   </style>
</head>
<body>
   <div class="ball ball1" style = "margin-left: 0;"></div>
   <div class="ball ball2" style = "margin-left: 0;"></div>
   <div class="ball ball3" style = "margin-left: 0;"></div>

   <script>
       var ball1 = document.querySelector('.ball1');
       var ball2 = document.querySelector('.ball2');
       var ball3 = document.querySelector('.ball3');

       function animate(ball,distance,cb){
           setTimeout(function(){
               var marginLeft = parseInt(ball.style.marginLeft,10);
               if(marginLeft===distance){
                   cb&&cb();
               }else if(marginLeft<distance){
                   marginLeft++;
               }else if(marginLeft>distance){
                   marginLeft--;
               }

               ball.style.marginLeft = marginLeft + "px";

               animate(ball,distance,cb);
           },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(){

                   //        })
                   //    })
                   // })
               })
           })
       })
   </script>
</body>
</html>