ES6：promise，race，all，reject，setTimeout，setInterval，random()，賽跑游戲
目錄：
學(xué)習(xí)記錄
ES6語(yǔ)法完成：
1、在一個(gè)游戲中有兩個(gè)任務(wù)，一個(gè)是采蘑菇，一個(gè)是殺雞，請(qǐng)通過(guò)promise實(shí)現(xiàn)兩個(gè)任務(wù)都完成以后才能升級(jí)。
2、在一個(gè)游戲中有兩個(gè)任務(wù)，一個(gè)是采蘑菇，一個(gè)是殺雞，請(qǐng)通過(guò)promise實(shí)現(xiàn)只要其中有一個(gè)任務(wù)完成就顯示“恭喜您獲得大陸勇士的稱(chēng)號(hào)”
3、在頁(yè)面上創(chuàng)建三個(gè)div，div從左往右移動(dòng)，通過(guò)Promise使這三個(gè)div的移動(dòng)速度不一樣，同時(shí)當(dāng)?shù)谝粋€(gè)div到達(dá)屏幕右邊時(shí)，彈出當(dāng)前到達(dá)屏幕右邊的div的編號(hào)，并提示“第x個(gè)div獲得了冠軍”。
ES5Promise all.html
ES6Promise.html
ES6Promise race.html
ES6Promise reject用法.html
個(gè)人理解：setTimeout是設(shè)定特定秒執(zhí)行一次函數(shù)，setInterval是設(shè)置特定秒的間斷的一直執(zhí)行函數(shù)。
let num2 = Math.ceil((Math.random() * 20) + 10);因?yàn)?0=30-10，所以是生成10到30（含頭不含尾）的隨機(jī)數(shù)。
學(xué)習(xí)記錄
"什么樣的情況下使用Promise?當(dāng)發(fā)現(xiàn)代碼中出現(xiàn)了異步的代碼（setTimeout,ajax,setInterval）,
而且需要對(duì)這些代碼的執(zhí)行順序進(jìn)行控制的時(shí)候。"
race:競(jìng)賽
個(gè)人認(rèn)為promise的作用之一就是用來(lái)控制執(zhí)行順序的，能寫(xiě)起來(lái)看起來(lái)好看，即“優(yōu)雅”。
ES6語(yǔ)法完成：
1、在一個(gè)游戲中有兩個(gè)任務(wù)，一個(gè)是采蘑菇，一個(gè)是殺雞，請(qǐng)通過(guò)promise實(shí)現(xiàn)兩個(gè)任務(wù)都完成以后才能升級(jí)。
<!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('看到這句話說(shuō)明執(zhí)行了：' + rs+'的操作后，終于可以升級(jí)了！');
});
</script>
<body>
</body>
</html>
2、在一個(gè)游戲中有兩個(gè)任務(wù)，一個(gè)是采蘑菇，一個(gè)是殺雞，請(qǐng)通過(guò)promise實(shí)現(xiàn)只要其中有一個(gè)任務(wù)完成就顯示“恭喜您獲得大陸勇士的稱(chēng)號(hào)”
<!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任務(wù)'+'耗時(shí)'+num1+'秒');
res('采蘑菇的操作1任務(wù)！'+'耗時(shí)'+num1+'秒'.trim());
},num1*1000);
});
}
let num2 = Math.ceil(Math.random() * 10);
function caoZuo2(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('殺雞的操作2任務(wù)'+'耗時(shí)'+num2+'秒');
res('殺雞的操作2任務(wù)！'+'耗時(shí)'+num2+'秒'.trim());
},num2*1000);
});
}
Promise.race([caoZuo1(),caoZuo2()])
? ? .then(function(data1){
console.log(`恭喜您獲得大陸勇士的稱(chēng)號(hào)，因?yàn)槟阆韧瓿闪耍?${data1}`);
/*console.log('恭喜您獲得大陸勇士的稱(chēng)號(hào)，因?yàn)槟阆韧瓿闪耍?#39; + data1);
?這樣寫(xiě)也可以，但拼接字符串有時(shí)麻煩，我習(xí)慣用模板字符串【個(gè)人理解：
?模板字符串就是使用了反引號(hào)``和${}的字符串】
如果使用模板字符串表示多行字符串，
所有的空格和縮進(jìn)都會(huì)保留在輸出中，
如果不想要頭尾的空白符，可以使用trim方法消除。*/
? ? });
</script>
<body>
</body>
</html>
setTimeout是設(shè)定特定秒執(zhí)行一次函數(shù)，setInterval是設(shè)置特定秒的間斷的一直執(zhí)行函數(shù)。
3、在頁(yè)面上創(chuàng)建三個(gè)div，div從左往右移動(dòng)，通過(guò)Promise使這三個(gè)div的移動(dòng)速度不一樣，同時(shí)當(dāng)?shù)谝粋€(gè)div到達(dá)屏幕右邊時(shí)，彈出當(dāng)前到達(dá)屏幕右邊的div的編號(hào)，并提示“第x個(gè)div獲得了冠軍”。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {
margin: 0;
padding: 0;
}
</style>
<script>
window.onload = function() {
//比賽場(chǎng)地：
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/秒，目前移動(dòng)了" + left1 + "px");
//
div1.style.left = left1 + "px";
if(left1 >= 100) {
res('div1先到達(dá)100px的賽跑的終點(diǎn)，' + '共耗時(shí)' + left1 / num1 + '秒，直到停止移動(dòng)了' + 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);【如果設(shè)置num2為平均速度，num2就設(shè)置在這里】
function caoZuo2() {
return new Promise(function(res, rej) {
s2 = setInterval(function() {
let num2 = Math.ceil((Math.random() * 20) + 10); //【如果設(shè)置num2變速，num2就設(shè)置在這里】
left2 = left2 + num2;
console.log("div2的速度是：" + num2 + "px/秒，目前移動(dòng)了" + left2 + "px");
//
div2.style.left = left2 + "px";
if(left2 >= 100) {
res('div2先到達(dá)50px的賽跑的終點(diǎn)，' + '共耗時(shí)' + left2 / num2 + '秒，直到停止移動(dòng)了' + 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>
//燒開(kāi)水：8秒
//洗茶杯：3秒
//買(mǎi)茶葉：4秒
//以上的三個(gè)任務(wù)的代碼全部執(zhí)行完以后，才可以執(zhí)行泡茶的代碼
function boil(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('水燒開(kāi)了');
res('一壺開(kāi)水');
},8000);
});
}
function wash(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('茶杯洗好了');
res('一個(gè)茶杯');
},3000);
});
}
function leaf(){
return new Promise(function(res,rej){
setTimeout(function(){
console.log('茶葉買(mǎi)好了');
res('一兩茶葉');
},4000);
});
}
let p1 = boil();
let p2 = wash();
let p3 = leaf();
Promise.all([p1,p2,p3]).then(function(rs){
//三個(gè)任務(wù)中的代碼全部執(zhí)行完畢以后才會(huì)執(zhí)行這里的代碼
console.log('成功獲取到泡茶的全部道具：' + rs);
console.log('泡茶成功');
});
</script>
</head>
<body>
</body>
</html>
ES6Promise.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
? ? //購(gòu)買(mǎi)商品：
? ? //選擇商品：2秒
? ? //下單：1秒
? ? //收快遞：5秒
? ? //回調(diào)地獄
// ? ? 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('選擇商品成功');
? ? //選中了兩樣商品：羅技鼠標(biāo)和鼠標(biāo)墊
? ? res(['羅技鼠標(biāo)','鼠標(biāo)墊']);//selectPro的任務(wù)已經(jīng)完成了，可以執(zhí)行then方法中的代碼了
? ? },2000);
? ? });
? ? }
? ? function order(){
? ? return new Promise(function(res,rej){
? ? setTimeout(function(){
? ? console.log('下單成功');
? ? res(260.00);//下單任務(wù)完成了，可以執(zhí)行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);
? ? //繼續(xù)執(zhí)行下單的任務(wù)
? ? return new order();
? ? }).then(function(data){
? ? console.log('下單花費(fèi)了' + data + '元');
? ? return new recPro();
? ? }).then(function(data){
? ? console.log('收到來(lái)自于' + data.name + '好評(píng),手機(jī)號(hào)碼是：'?
? ? ? ? + data.mobile);
? ? });
? ? console.log('這句代碼會(huì)和selectPro函數(shù)同時(shí)運(yùn)行');
</script>
</head>
<body>
</body>
</html>
ES6Promise race.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function player(){
//隨機(jī)產(chǎn)生1到10之間的整數(shù)
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){
? ? //所有任務(wù)中，最先完成的任務(wù)會(huì)觸發(fā)then函數(shù)中的代碼
? ? console.log('本次最先跑完花費(fèi)的時(shí)間是：' + 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(){
//隨機(jī)生成1到10之間的一個(gè)整數(shù)
let num = Math.ceil(Math.random() * 10);
if(num <= 5) {
//調(diào)用res代表業(yè)務(wù)執(zhí)行成功
//將num傳遞到then方法中去
res(num);
} else {
//調(diào)用rej代表業(yè)務(wù)執(zhí)行失敗
rej('生成的數(shù)字太大了');
}
},2000);
});
}
getNumber().then(function(data){//調(diào)用res函數(shù)時(shí)觸發(fā)
console.log('業(yè)務(wù)執(zhí)行成功，生成的數(shù)字是：' + data);
//console.log(a);//這句代碼會(huì)報(bào)錯(cuò)
},function(data){//調(diào)用rej函數(shù)時(shí)觸發(fā)
console.log(data);
}).catch(function(err){//當(dāng)then函數(shù)中的代碼報(bào)錯(cuò)時(shí)，會(huì)運(yùn)行catch函數(shù)中的代碼
console.log(err);
console.log('其他的代碼');
});
</script>
</head>
<body>
</body>
</html>
