ES6：promise，race，all，reject，setTimeout，setInterval，random()，赛跑游戏
目录：
学习记录
ES6语法完成：
1、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现两个任务都完成以后才能升级。
2、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现只要其中有一个任务完成就显示“恭喜您获得大陆勇士的称号”
3、在页面上创建三个div，div从左往右移动，通过Promise使这三个div的移动速度不一样，同时当第一个div到达屏幕右边时，弹出当前到达屏幕右边的div的编号，并提示“第x个div获得了冠军”。
ES5Promise all.html
ES6Promise.html
ES6Promise race.html
ES6Promise reject用法.html
个人理解：setTimeout是设定特定秒执行一次函数，setInterval是设置特定秒的间断的一直执行函数。
let num2 = Math.ceil((Math.random() * 20) + 10);因为20=30-10，所以是生成10到30（含头不含尾）的随机数。
学习记录
"什么样的情况下使用Promise?当发现代码中出现了异步的代码（setTimeout,ajax,setInterval）,
而且需要对这些代码的执行顺序进行控制的时候。"
race:竞赛
个人认为promise的作用之一就是用来控制执行顺序的，能写起来看起来好看，即“优雅”。
ES6语法完成：
1、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现两个任务都完成以后才能升级。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
function caoZuo1(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('操作1');
res('采蘑菇');//传参
},2333);
});
}
function caoZuo2(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('操作2');
res('杀鸡');//传参
},6666);
});
}
let c1 = caoZuo1();
let c2 = caoZuo2();
Promise.all([c1,c2]).then(function(rs){//传参
console.log('看到这句话说明执行了：' + rs+'的操作后，终于可以升级了！');
});
</script>
<body>
</body>
</html>
2、在一个游戏中有两个任务，一个是采蘑菇，一个是杀鸡，请通过promise实现只要其中有一个任务完成就显示“恭喜您获得大陆勇士的称号”
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
let num1 = Math.ceil(Math.random() * 10);
function caoZuo1(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('采蘑菇的操作1任务'+'耗时'+num1+'秒');
res('采蘑菇的操作1任务！'+'耗时'+num1+'秒'.trim());
},num1*1000);
});
}
let num2 = Math.ceil(Math.random() * 10);
function caoZuo2(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('杀鸡的操作2任务'+'耗时'+num2+'秒');
res('杀鸡的操作2任务！'+'耗时'+num2+'秒'.trim());
},num2*1000);
});
}
Promise.race([caoZuo1(),caoZuo2()])
.then(function(data1){
console.log(`恭喜您获得大陆勇士的称号，因为你先完成了： ${data1}`);
/*console.log('恭喜您获得大陆勇士的称号，因为你先完成了：' + data1);
这样写也可以，但拼接字符串有时麻烦，我习惯用模板字符串【个人理解：
模板字符串就是使用了反引号``和${}的字符串】
如果使用模板字符串表示多行字符串，
所有的空格和缩进都会保留在输出中，
如果不想要头尾的空白符，可以使用trim方法消除。*/
});
</script>
<body>
</body>
</html>
setTimeout是设定特定秒执行一次函数，setInterval是设置特定秒的间断的一直执行函数。
3、在页面上创建三个div，div从左往右移动，通过Promise使这三个div的移动速度不一样，同时当第一个div到达屏幕右边时，弹出当前到达屏幕右边的div的编号，并提示“第x个div获得了冠军”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script>
window.onload = function() {
//比赛场地：
let changDi = document.createElement("div");
changDi.style.width = '100px';
changDi.style.height = '400px';
changDi.style.backgroundColor = "black";
changDi.style.position = "absolute";
changDi.style.left = "50px";
changDi.style.zIndex = -1;
document.body.appendChild(changDi);
//div1：
let div1 = document.querySelector("#divId1");
//alert(div1)
div1.style.width = '50px';
div1.style.height = '50px';
div1.style.backgroundColor = "red";
div1.style.position = "absolute";
div1.style.top = "100px";
let left1 = 0;
// let num1 = Math.ceil(Math.random() * 10);
function caoZuo1() {
return new Promise(function(res, rej) {
s1 = setInterval(function() {
let num1 = Math.ceil((Math.random() * 20) + 10);
left1 = left1 + num1;
console.log("div1的速度是：" + num1 + "px/秒，目前移动了" + left1 + "px");
//
div1.style.left = left1 + "px";
if(left1 >= 100) {
res('div1先到达100px的赛跑的终点，' + '共耗时' + left1 / num1 + '秒，直到停止移动了' + left1 + 'px'.trim());
clearInterval(s1)
}
}, 1000);
});
}
//div2：
let div2 = document.querySelector("#divId2");
div2.style.width = '50px';
div2.style.height = '50px';
div2.style.backgroundColor = "blue";
div2.style.position = "absolute";
div2.style.top = "300px";
let left2 = 0;
//let num2 = Math.ceil(Math.random() * 10);【如果设置num2为平均速度，num2就设置在这里】
function caoZuo2() {
return new Promise(function(res, rej) {
s2 = setInterval(function() {
let num2 = Math.ceil((Math.random() * 20) + 10); //【如果设置num2变速，num2就设置在这里】
left2 = left2 + num2;
console.log("div2的速度是：" + num2 + "px/秒，目前移动了" + left2 + "px");
//
div2.style.left = left2 + "px";
if(left2 >= 100) {
res('div2先到达50px的赛跑的终点，' + '共耗时' + left2 / num2 + '秒，直到停止移动了' + left2 + 'px'.trim());
clearInterval(s2)
}
}, 1000);
});
}
Promise.race([caoZuo1(), caoZuo2()])
.then(function(data1) {
console.log(data1);
// alert(document.getElementsByTagName("span")[0]);
document.getElementsByTagName("span")[0].innerText=data1;
// alert(data1);
}
);
}
</script>
<body>
<span>100px赛跑比赛！</span>
<div id="divId1">div1</div>
<div id="divId2">div2</div>
</script>
</body>
</html>
ES5Promise all.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//烧开水：8秒
//洗茶杯：3秒
//买茶叶：4秒
//以上的三个任务的代码全部执行完以后，才可以执行泡茶的代码
function boil(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('水烧开了');
res('一壶开水');
},8000);
});
}
function wash(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('茶杯洗好了');
res('一个茶杯');
},3000);
});
}
function leaf(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('茶叶买好了');
res('一两茶叶');
},4000);
});
}
let p1 = boil();
let p2 = wash();
let p3 = leaf();
Promise.all([p1,p2,p3]).then(function(rs){
//三个任务中的代码全部执行完毕以后才会执行这里的代码
console.log('成功获取到泡茶的全部道具：' + rs);
console.log('泡茶成功');
});
</script>
</head>
<body>
</body>
</html>
ES6Promise.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//购买商品：
//选择商品：2秒
//下单：1秒
//收快递：5秒
//回调地狱
// setTimeout(function(){
// console.log('商品选择完成');
// setTimeout(function(){
// console.log('下单完成');
// setTimeout(function(){
// console.log('收到快递');
// },5000);
// },1000);
// },2000);
function selectPro(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('选择商品成功');
//选中了两样商品：罗技鼠标和鼠标垫
res(['罗技鼠标','鼠标垫']);//selectPro的任务已经完成了，可以执行then方法中的代码了
},2000);
});
}
function order(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('下单成功');
res(260.00);//下单任务完成了，可以执行then方法中的代码了
},1000)
});
}
function recPro(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('收到快递');
res({name: '张三',mobile: '13988888888'});
},5000);
});
}
selectPro().then(function(data){
console.log('你选择的商品是：' + data);
//继续执行下单的任务
return new order();
}).then(function(data){
console.log('下单花费了' + data + '元');
return new recPro();
}).then(function(data){
console.log('收到来自于' + data.name + '好评,手机号码是：'
+ data.mobile);
});
console.log('这句代码会和selectPro函数同时运行');
</script>
</head>
<body>
</body>
</html>
ES6Promise race.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function player(){
//随机产生1到10之间的整数
let num = Math.ceil(Math.random() * 10);
return new Promise(function(res,rej){
setTimeout(function(){
console.log('跑了' + num + '秒');
res(num);
},num * 1000);
});
}
Promise.race([player(),player(),player()])
.then(function(data){
//所有任务中，最先完成的任务会触发then函数中的代码
console.log('本次最先跑完花费的时间是：' + data + '秒');
});
</script>
</head>
<body>
</body>
</html>
ES6Promise reject用法.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function getNumber(){
return new Promise(function(res,rej){
setTimeout(function(){
//随机生成1到10之间的一个整数
let num = Math.ceil(Math.random() * 10);
if(num <= 5) {
//调用res代表业务执行成功
//将num传递到then方法中去
res(num);
} else {
//调用rej代表业务执行失败
rej('生成的数字太大了');
}
},2000);
});
}
getNumber().then(function(data){//调用res函数时触发
console.log('业务执行成功，生成的数字是：' + data);
//console.log(a);//这句代码会报错
},function(data){//调用rej函数时触发
console.log(data);
}).catch(function(err){//当then函数中的代码报错时，会运行catch函数中的代码
console.log(err);
console.log('其他的代码');
});
</script>
</head>
<body>
</body>
</html>
