报错，谁帮我看看什么情况
<!DOCTYPE html>
<html>
<head>
<title> promise animation</title>
<style type="text/css">
.ball{
width: 40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</style>
<script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.js"></script>
</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 type="text/javascript">
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{
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(){
// //
// })
// })
// })
// })
// })
// })
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)
}
_animate()
})
}
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)
})
</script>
</body>
</html>
