javascript怎么实现红绿灯

145 阅读 0 评论 96 点赞

我是靠谱客的博主端庄哈密瓜，这篇文章主要介绍javascript怎么实现红绿灯，现在分享给大家，希望可以做个参考。

本教程操作环境：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();1
2
3
4
5
6
7
8
9
10
11
12
13
14
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();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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();
登录后复制