Promise 实现小球的运动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Animate Ball</title>
<style type="text/css">
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
margin-left: 0;
}
.ball1 {
background-color: yellow;
}
.ball2 {
background-color: red;
}
.ball3 {
background-color: blue;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left:0px;"></div>
<div class="ball ball2" style="margin-left:0px;"></div>
<div class="ball ball3" style="margin-left:0px;"></div>
<script type="text/javascript" src="./node_modules/bluebird/js/browser/bluebird.js"></script>
<script type="text/javascript" >
/*function animateBall(ball, distance, callback){
//setTimeout过渡效果
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft==distance){
callback && callback();
}else{
if(marginLeft<distance){
marginLeft ++;
}
if(marginLeft>distance){
marginLeft--;
}
ball.style.marginLeft = marginLeft +‘px‘;
//callback
animateBall(ball, distance, callback);
}
}, 13);
}
var ball1 = document.querySelector(‘.ball1‘);
var ball2 = document.querySelector(‘.ball2‘);
var ball3 = document.querySelector(‘.ball3‘);
animateBall(ball1, 150, function(){
animateBall(ball2, 250, function(){
animateBall(ball3, 350, function(){
animateBall(ball3, 200, function(){
animateBall(ball2, 100, function(){
animateBall(ball1, 50, function(){
})
})
})
})
})
})*/
var ball1 = document.querySelector(‘.ball1‘);
var ball2 = document.querySelector(‘.ball2‘);
var ball3 = document.querySelector(‘.ball3‘);
//promise
var Promise = window.Promise;
//使用 promise 替代回调函数
function promiseAnimate(ball, distance){
return new Promise(function(resolve, reject) {
function _animate(){
//setTimeout过渡效果
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft, 10);
console.log(marginLeft);
if(marginLeft==distance){
//resolve函数：将Promise对象的状态从 “未完成”变为 “成功”（Pending ->Resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去
resolve(ball, distance);
}else{
if(marginLeft<distance){
marginLeft ++;
}
if(marginLeft>distance){
marginLeft--;
}
ball.style.marginLeft = marginLeft +‘px‘;
//callback
_animate();
}
}, 13);
}
_animate();
});
}
promiseAnimate(ball1, 150)
.then(function(){
return promiseAnimate(ball2, 250);
}).then(function(){
return promiseAnimate(ball3, 300);
}).then(function(){
return promiseAnimate(ball3, 200);
}).then(function(){
return promiseAnimate(ball2, 100);
}).then(function(){
return promiseAnimate(ball1, 50);
})
</script>
</body>
</html>
在线代码编辑 请点击
原文：http://www.cnblogs.com/zjf-1992/p/6562082.html