js异步成同步

• js异步成同步有4种方法：Callback/Promise/Generator/async，下面我以题目为例子演示这四种方法。

题目

• 现有打印红色、绿色和黄色三个函数，要求等待三秒后打印一次红色，然后等待2秒后打印一次绿色，接着等待一秒后再打印一次黄色;按此规律不断循环打印红绿黄。

// 亮灯函数如下:
function red(){ console.log(‘red’); }
function green(){ console.log(‘green’); }
function yellow(){ console.log(‘yellow’); }

解答

Callback（回调函数）

function Callback(){
    setTimeout(() => {
        red();
        setTimeout(() => {
            green()
            setTimeout(() =>{
                yellow()
                Callback();
            }, 1000)
        }, 2000);
    }, 3000);
}
Callback()

Promise

// Promise
function light(fun, time){
    return new Promise((res) => {
        setTimeout(() => {
            fun()
            res()
        }, time);
    })
}

function promise(){
    Promise.resolve().then(() => {
        return light(red, 3000) // 要返回Promise对象
    }).then(() => {
        return light(green, 2000)
    }).then(() => {
        return light(yellow, 1000)
    }).then(() =>{
        promise()
    })
}
promise()

Generator

// Generator
 function light(fun, time, gt){
    setTimeout(() => {
        fun()
        gt.next()
    }, time);
}

let gt = ""          // 让gt去控制函数的运行
function *generator(){
    yield light(red, 3000, gt)
    yield light(green, 2000, gt)
    yield light(yellow, 1000, gt)
    gt = generator()
    gt.next()
}

gt = generator()
gt.next()

async

function light(fun, time){
    return new Promise((res) => {
        setTimeout(() => {
            fun()
            res()
        }, time);
    })
}

async function asyncFun(){
    await light(red, 3000)  // async/await是一个组合
    await light(green, 2000)
    await light(yellow, 1000)
    asyncFun()
}
asyncFun()