美文网首页
比较不同的异步处理方式

比较不同的异步处理方式

作者: nomooo | 来源:发表于2019-12-26 14:47 被阅读0次

    例题:

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

    相关文章

      网友评论

          本文标题:比较不同的异步处理方式

          本文链接:https://www.haomeiwen.com/subject/tmnkoctx.html