例题:
红灯 3s 亮一次,绿灯 1s 亮一次,黄灯 2s 亮一次;如何让三个灯不断交替重复亮灯?
三个亮灯函数已经存在:
const red = () => {
console.log('red');
}
const green = () => {
console.log('green');
}
const yellow = () => {
console.log('yellow')
}
方案一(callback):
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(1000,'green',() => {
task(2000,'yellow',step)
})
})
}
step()
方案二(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(1000, 'green'))
.then(() => task(2000, 'yellow'))
.then(step)
}
step()
方案三(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 step = async () => {
await task(3000,'red')
await task(1000,'green')
await task(2000,'yellow')
await step();
}
step()
熟悉 Promise 是基础,是理解 async/await 的必要知识,学习 async/await 代表了学习“最先进的生产力”
网友评论