javascript如何完成交通信号灯

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如何完成交通信号灯的详尽具体内容，大量请关心自学java网其他相关文章！