Promise初探

上面的动画
用传统的回调的方法控制动画实现

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Promise animation</title>
	<style type="text/css" media="screen">
		.ball{
			width: 40px;
			height: 40px;
			border-radius: 20px;
		}
		.ball1{
			background: red;
		}
		.ball2{
			background: yellow;
		}
		.ball3{
			background: green;
		}
	</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">
		
		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(){
								})
							})
						})
					})
				})
		})
	</script>
</body>
</html>

这种方式存在回调地狱

我们用promise来实现一下

promise的厉害之处就在于只用了一个api接口同时解决回调地狱和异步异常流程控制，还能轻松处理异步和同步流程混杂，说是JS语言内部缺少的一部分也不为过（实际上已经出现了原生Promise）

这里用bluebird这个库

1	npm install bluebird

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Promise animation</title>
	<style type="text/css" media="screen">
		.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:0px;"></div>
	<div class="ball ball2" style="margin-left:0px;"></div>
	<div class="ball ball3" style="margin-left:0px;"></div>
	<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 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>