18.JS红绿灯

本文主要是介绍18.JS红绿灯，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

循环打印红黄绿，这是一道非常经典的场景应用题。通过这个问题来对比几种异步编程方法：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯不断交替重复亮灯？

三个亮灯函数：

function red() {console.log('red');
}
function green() {console.log('green');
}
function yellow() {console.log('yellow');
}

这道题复杂的地方在于需要“交替重复”亮灯，而不是“亮完一次”就结束了。

实现方式1（回调函数）

const task = (timer, light, callback) => {setTimeout(() => {if (light === 'red') {red()}else if (light === 'green') {green()}else if (light === 'yellow') {yellow()}callback()}, timer)
}
task(3000, 'red', () => {task(2000, 'green', () => {task(1000, 'yellow', Function.prototype)})
})function red() {console.log('red');
}
function green() {console.log('green');
}
function yellow() {console.log('yellow');
}// red
// green
// yellow

这里存在一个 bug：代码只是完成了一次流程，执行后红黄绿灯分别只亮一次。该如何让它交替重复进行呢？

实现方式2（递归）

上面提到过递归，可以递归亮灯的一个周期：

const task = (timer, light, callback) => {setTimeout(() => {if (light === 'red') {red()}else if (light === 'green') {green()}else if (light === 'yellow') {yellow()}callback()}, timer)
}const step = () => {task(3000, 'red', () => {task(2000, 'green', () => {task(1000, 'yellow', step)})})
}
step()function red() {console.log('red');
}
function green() {console.log('green');
}
function yellow() {console.log('yellow');
}// red
// green
// yellow
// red
// green
// yellow
// red
// green

实现方式3（Promise）

const task = (timer, light) => new Promise((resolve, reject) => {setTimeout(() => {if (light === 'red') {red()}else if (light === 'green') {green()}else if (light === 'yellow') {yellow()}resolve()}, timer)})
const step = () => {task(3000, 'red').then(() => task(2000, 'green')).then(() => task(2100, 'yellow')).then(step)
}
step()function red() {console.log('red');
}
function green() {console.log('green');
}
function yellow() {console.log('yellow');
}// red
// green
// yellow
// red
// green
// yellow
// red
// green

实现方式4（async和await）

const task = (timer, light) =>new Promise((resolve, reject) => {setTimeout(() => {if (light === 'red') {red()}else if (light === 'green') {green()}else if (light === 'yellow') {yellow()}resolve()}, timer)})
const taskRunner = async () => {await task(3000, 'red')await task(2000, 'green')await task(2100, 'yellow')taskRunner()
}
taskRunner()function red() {console.log('red');
}
function green() {console.log('green');
}
function yellow() {console.log('yellow');
}// red
// green
// yellow
// red
// green
// yellow
// red
// green

这篇关于18.JS红绿灯的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---