javascript如何實(shí)現(xiàn)紅綠燈

本篇內(nèi)容介紹了“javascript如何實(shí)現(xiàn)紅綠燈”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

javascript實(shí)現(xiàn)紅綠燈的方法：1、使用setTimeout和遞歸來實(shí)現(xiàn)循環(huán)改變顏色；2、使用Promise，并把下一次的顏色改變寫在then里面；3、使用async await和while實(shí)現(xiàn)紅綠燈效果。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版本、Dell G3電腦。

javascript怎么實(shí)現(xiàn)紅綠燈？

JavaScript 實(shí)現(xiàn)紅綠燈

??使用setTimeout、Promise、async await 三種方式實(shí)現(xiàn)紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環(huán)改變顏色。改變顏色的方法，就簡單寫成打印出顏色。

setTimeout實(shí)現(xiàn)

??使用setTimeout是最基本的實(shí)現(xiàn)方式，代碼如下，使用遞歸來實(shí)現(xiàn)循環(huán)改變顏色。

function changeColor(color) {
console.log('traffic-light ', color);
}
function main() {
changeColor('red');
setTimeout(()=>{
changeColor('yellow');
setTimeout(() => {
changeColor('green');
setTimeout(main, 2000);
}, 1000);
}, 2000);
}
main();

Promise 實(shí)現(xiàn)

??使用Promise，把下一次的顏色改變寫在then里面，最后同樣使用遞歸完成循環(huán)。

function sleep(duration){
    return new Promise(resolve => {
        setTimeout(resolve, duration);
    })
}
function changeColor(duration,color){
    return new Promise(resolve => {
console.log('traffic-light ', color);
    sleep(duration).then(resolve);
})
}
function main() {
return new Promise(resolve => {
changeColor(2000, 'red').then(() => {
changeColor(1000, 'yellow').then(() => {
changeColor(3000, 'green').then(() => {
main();
})
})
})
})
}main();

async await 實(shí)現(xiàn)

??使用async await就可以避免Promise的一連串.then.then.then，也不再需要遞歸，使用while就可以實(shí)現(xiàn)循環(huán)。

function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
})
}
async function changeColor(color, duration) {
console.log('traffic-light ', color);
await sleep(duration);
}
async function main() {
while (true) {
await changeColor('red', 2000);
await changeColor('yellow', 1000);
await changeColor('green', 3000);
}
}
main();

“javascript如何實(shí)現(xiàn)紅綠燈”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！