WWW.lllT.neT

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网其他相关文章!

WWW.lllT.neT

声明:有的资源来自网络转载,版权归原作者所有,如有侵犯到您的权益请联系邮箱:our333@126.com我们将配合处理!

原文地址:javascript如何完成交通信号灯发布于2021-12-15 10:09:01