JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:50:31

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo):要求使用promise 實(shí)現(xiàn)紅綠燈顏色的跳轉(zhuǎn) 綠燈執(zhí)行三秒后黃燈執(zhí)行四秒后紅燈執(zhí)行五秒 html 實(shí)現(xiàn)如下： <ul id=traffic class=> <li id=green></li> <li id=yellow></li>

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo):要求使用promise 實(shí)現(xiàn)紅綠燈顏色的跳轉(zhuǎn) 綠燈執(zhí)行三秒后黃燈執(zhí)行四秒后紅燈執(zhí)行五秒 html 實(shí)現(xiàn)如下： <ul id=traffic class=> <li id=green></li> <li id=yellow></li>

要求

使用promise 實(shí)現(xiàn)紅綠燈顏色的跳轉(zhuǎn)

綠燈執(zhí)行三秒后

黃燈執(zhí)行四秒后

紅燈執(zhí)行五秒

html 實(shí)現(xiàn)如下：

<ul id="traffic" class="">
 <li id="green"></li>
 <li id="yellow"></li>
 <li id="red"></li>
</ul>

定義一個(gè)空類，之后再js中操作對(duì)應(yīng)的類名即可實(shí)現(xiàn)相關(guān)的效果。

CSS實(shí)現(xiàn)如下：

ul {
 position: absolute;
 width: 200px;
 height: 200px;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
 /*畫3個(gè)圓代表紅綠燈*/
 ul >li {
 width: 40px;
 height: 40px;
 border-radius:50%;
 opacity: 0.2;
 display: inline-block;
 }
 /*執(zhí)行時(shí)改變透明度*/
 ul.red >#red, 
 ul.green >#green,
 ul.yellow >#yellow{
 opacity: 1.0;
 }
 /*紅綠燈的三個(gè)顏色*/
 #red {background: red;}
 #yellow {background: yellow;}
 #green {background: green;}

javascript原理：

promise函數(shù)為一個(gè)異步操作函數(shù)，在函數(shù)運(yùn)行結(jié)束時(shí)可以使用then()方法。我們?cè)僭趐romise函數(shù)內(nèi)部設(shè)置延遲執(zhí)行即可實(shí)現(xiàn)。

js 代碼如下：

function timeout(timer){
 return function(){ 
 return new Promise(function(resolve,reject){
 setTimeout(resolve,timer) 
 }) 
 }
 }
 var green = timeout(3000);
 var yellow = timeout(4000);
 var red = timeout(5000);
 var traffic = document.getElementById("traffic");
 (function restart(){
 'use strict' //嚴(yán)格模式
 console.log("綠燈"+new Date().getSeconds()) //綠燈執(zhí)行三秒 
 traffic.className = 'green';
 green()
 .then(function(){
 console.log("黃燈"+new Date().getSeconds()) //黃燈執(zhí)行四秒
 traffic.className = 'yellow';
 return yellow();
 })
 .then(function(){
 console.log("紅燈"+new Date().getSeconds()) //紅燈執(zhí)行五秒
 traffic.className = 'red';
 return red();
 }).then(function(){
 restart()
 })
 })();

Demo 請(qǐng) 點(diǎn)擊這里!

ps:下面看一個(gè)Promise用法例子

注意：要想then方法能鏈?zhǔn)降膱?zhí)行下去，必須返回Promise對(duì)象！??！

'use strict'; 
 
function async(value) { 
 return new Promise(function(resolve, reject) { 
 var ms = Math.round(Math.random() * 1000); 
 setTimeout(function() { 
 console.log('waiting ' + ms + 'ms'); 
 // 等待ms毫秒 
 resolve(value + ms); 
 }, ms); 
 }); 
} 
// 每次執(zhí)行隨機(jī)等待n毫秒，結(jié)果統(tǒng)計(jì)總毫秒數(shù) 
async(0) 
.then(async) 
.then(async) 
.then(async) 
.then(async) 
.then(function(value) { 
 console.log('------total wait:' + value + 'ms'); 
}); 
//////////////////////////////////////////////////////////// 
function async1(value) { 
 return new Promise(function(resolve, reject) { 
 resolve(value + 1); 
 }); 
} 
function async2(value) { 
 // return new Promise(function(resolve, reject) { 
 // resolve(value + 2); 
 // }); 
 // 等價(jià)與上面寫法 
 return Promise.resolve(value + 2); 
} 
function async3(value) { 
 return new Promise(function(resolve, reject) { 
 resolve(value + 3); 
 }); 
} 
async1(100).then(async2).then(async3).then(function(value) { 
 console.log('------' + value); 
}); 
///////////////////////////////////////////////////////////////// 
function say() { 
 var value = 'what'; 
 return Promise.resolve(value); 
} 
say().then(function(value) { 
 value = value + ' are'; 
 return Promise.resolve(value); 
}).then(function(value) { 
 value = value + ' you'; 
 return Promise.resolve(value); 
}).then(function(value) { 
 value = value + ' doing'; 
 return Promise.resolve(value); 
 //return Promise.reject('error, exit'); // 中途退出 
}).then(function(value) { 
 value = value + ' now!'; 
 return Promise.resolve(value); 
}).then(function(value) { 
 console.log('------' + value); 
}).catch(function(error) { 
 console.log('------' + error); 
}); 
<html> 
<head> 
 <title>Ball move</title> 
 <style type="text/css"> 
 .ball { 
 width: 40px; 
 height: 40px; 
 border-radius: 20px; 
 margin-left: 10px; 
 } 
 .ball1 { 
 background: #ff0000; 
 } 
 .ball2 { 
 background: #00ff00; 
 } 
 .ball3 { 
 background: #0000ff; 
 } 
 </style> 
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> 
</head> 
<body> 
 <div class="ball ball1"></div> 
 <div class="ball ball2"></div> 
 <div class="ball ball3"></div> 
 <script type="text/javascript"> 
 function moving(ball, pos) { 
 return new Promise(function(resolve, reject) { 
 var marginLeft = parseInt(ball.css('margin-left')); 
 if (marginLeft != pos) { 
 var timerId = setInterval(function() { 
 marginLeft = marginLeft + 1; 
 ball.css('margin-left', marginLeft); 
 if (marginLeft == pos) { 
 clearInterval(timerId); 
 resolve(); 
 } 
 }, 20); 
 } else { 
 resolve(); 
 } 
 }); 
 } 
 moving($('.ball1'), 100).then(function() { 
 return moving($('.ball2'), 150); 
 }).then(function() { 
 return moving($('.ball3'), 200); 
 }); 
 </script> 
</body> 
</html>

總結(jié)

以上所述是小編給大家介紹的JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： js 紅綠燈實(shí)例代碼

熱門焦點(diǎn)

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

JS 中使用Promise 實(shí)現(xiàn)紅綠燈實(shí)例代碼(demo)

最新推薦

猜你喜歡

熱門推薦