javascript實現紅綠燈的方法：1、使用setTimeout和遞歸來實現循環改變顏色；2、使用Promise，並把下一次的顏色改變寫在then裡面；3、使用async await和while實現紅綠燈效果。
本教學操作環境：windows7系統、javascript1.8.5版本、Dell G3電腦。
javascript怎麼實現紅綠燈？
JavaScript 實作紅綠燈
使用setTimeout、Promise、async await 三種方式實作紅綠燈代碼，紅燈2秒，黃燈1秒，綠燈3秒，循環改變顏色。改變顏色的方法，就簡單寫成印出顏色。
setTimeout實作
使用setTimeout是最基本的實作方式，程式碼如下，使用遞迴來實作循環改變顏色。
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 實作
使用Promise，把下一次的顏色改變寫在then裡面，最後同樣使用遞歸完成迴圈。
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 實作
使用async await就可以避免Promise的一連串.then.then.then，也不再需要遞歸，使用while就可以實現循環。
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基礎教學》
以上是javascript怎麼實現紅綠燈的詳細內容。更多資訊請關注PHP中文網其他相關文章！
