NodeJS基础2---1 Promise小球运动

时间 2019-11-17

标签 nodejs 基础 promise 小球运动繁體版

原文原文链接

1、小球运动普通写法

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。html

获取文档中第一个 <p> 元素：document.querySelector("p");
获取文档中 class="example" 的第一个 <p> 元素: document.querySelector("p.example");

获取文档中有 "targnode

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Promise animation</title>
		<style>
			.ball{width: 40px; height: 40px; border-radius: 20px; }
			.ball1{background: crimson;}
			.ball2{background: darkorange;}
			.ball3{background: darkgreen;}
		</style>
	</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>
		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); //表示以10为基数
				
				if (marginLeft === distance){ //当球运动到指望地点
					cb && cb();	
				}else{
					if(marginLeft <distance){
						marginLeft++;
					}else{
					marginLeft --;
				    }
					//debugger
					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(){
				            })
						})
				    })
				})
			})
		})
	</script>
	</body>
</html>

et" 属性的第一个 <a> 元素：document.querySelector("a[target]")npm

2、Promise方法实现

首先nodeJS安装目录：E:\nodeJS\nodejs\node_modules\npm\node_modules 下安装 bluebird库promise

而后在 node_modules下就能够找到bluebird文件夹，找到bluebird.js引入项目浏览器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Promise animation</title>
		<style>
			.ball{width: 40px; height: 40px; border-radius: 20px; }
			.ball1{background: crimson;}
			.ball2{background: darkorange;}
			.ball3{background: darkgreen;}
		</style>
		<script src="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>
		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(){ //animate加下划线，变为私有函数
					setTimeout(function(){
						
						var marginLeft = parseInt(ball.style.marginLeft,10); //表示以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>