                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Node.js
                        
                        /進(jìn)擊Node.js基礎(chǔ)（二）

使用老師講的第一種方法.最后演示結(jié)果很奇怪:第一個(gè)小球緩慢移動(dòng)到100px的位置,但是第二個(gè)第三個(gè)小球就直接移動(dòng)過(guò)去了,沒(méi)有中間循序漸進(jìn)的過(guò)程,請(qǐng)問(wèn)是咋回事?

<!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>