                        課程
                    
                        /前端開發
                        
                            /Node.js
                        
                        /進擊Node.js基礎（二）

小球不動？看上去沒毛病昂?。?/h1>

<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

關注問題我要回答

1235

操作

收起

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()