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

小球不动？看上去没毛病昂！！

<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")
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()						
                }else{							
                    if(marginLeft < distance){								
                        marginLeft ++							
                    }else{								
                        marginLeft --							
                    }							
                    ball.style.marginLeft = marginLeft + 'px'							
                    _animate()						
                }					
            },13)				
        }			
    })		
}
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)			
    })

慕粉6790992

2018-05-24

源自：进击Node.js基础（二） 1-2

关注问题我要回答

1172

操作

收起

1 回答

慕移动6488646 回答被采纳 +2 积分
2018-05-24

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()
                } else {
                    if (marginLeft < distance) {
                        marginLeft++
                    } else {
                        marginLeft--
                    }
                    ball.style.marginLeft = marginLeft + 'px'
                    _animate()
                }
            }, 13)
        }
        _animate()
    })
}

倒数第三行漏写了 _animate()