比较不同的异步处理方式

2019-12-26  本文已影响0人  nomooo

例题:

红灯 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 代表了学习“最先进的生产力”

上一篇 下一篇

猜你喜欢

热点阅读