写在前面：
- 安装bluebird模块
在view.html所在目录下打开终端（命令行），执行
npm install bluebird
- 用<script>标签引入bluebird.js
- Promise的写法很好解决了“回调地狱”的问题
Code：
// view.html
<!DOCTYPE>
<html>
<title>Promisee animation</title>
<head>
<style>
.ball {
width: 40px;
height: 40px;
border-radius: 20px;
}
.ball1 {
background-color: red;
}
.ball2 {
background-color: yellow;
}
.ball3 {
background-color: green;
}
</style>
<script 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>
</body>
<script type="text/javascript">
var ball1 = document.querySelector('.ball1');
var ball2 = document.querySelector('.ball2');
var ball3 = document.querySelector('.ball3');
function animate(ball, distance, callback) {
setTimeout(function() {
var marginLeft = parseInt(ball.style.marginLeft, 10);
if(marginLeft === distance) {
callback && callback();
} else {
if(marginLeft < distance) {
marginLeft++;
} else {
marginLeft--;
}
ball.style.marginLeft = marginLeft + 'px';
animate(ball, distance, callback);
}
}, 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 pomiseAnimate(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();
})
}
pomiseAnimate(ball1, 100)
.then(function() {
return pomiseAnimate(ball2, 200)
})
.then(function() {
return pomiseAnimate(ball3, 300)
})
.then(function() {
return pomiseAnimate(ball3, 150)
})
.then(function() {
return pomiseAnimate(ball2, 150)
})
.then(function() {
return pomiseAnimate(ball1, 150)
});
</script>
</html>
网友评论