函数生成器解决回调地狱问题

直接上代码

// 需求 一秒后打印111，然后两秒后打印222，然后三秒后打印333
// 传统方法定时器
setTimeout(() => {
    console.log(111);
    setTimeout(() => {
        console.log(222);
        setTimeout(() => {
            console.log(333);
        }, 3000);
    }, 2000);
}, 1000);
// 函数生成器方法
function one() {
    setTimeout(() => {
        console.log(111);
        iterotator.next();
    }, 1000);

}

function two() {
    setTimeout(() => {
        console.log(222);
        iterotator.next();
    }, 2000);

}

function three() {
    setTimeout(() => {
        console.log(333);
        iterotator.next();
    }, 3000);

}

function* myFn() {
    yield one();
    yield two();
    yield three();
}
let iterotator = myFn();
iterotator.next();

模拟需求，一开始拿到用户姓名，按照姓名去查询订单，然后查询该订单中的商品，一步一步进行。

function one(arg) {

    setTimeout(() => {
        let userMsg = 'slc'
        console.log(`${arg}slc`);
        iterotator.next(userMsg);// 这是第二次调用next，这个时常会当做第一次yield的返回结果
    }, 1000);

}

function two(arg) {
    setTimeout(() => {

        let order = '订单';
        console.log(`${arg}的${order}`);
        iterotator.next(order);
    }, 2000);

}

function three(arg) {
    setTimeout(() => {

        let goods = '鼠标'
        console.log(`${arg}中有${goods}`);
        iterotator.next(goods);
    }, 3000);

}

function* myFn() {
    let userMsg = yield one('开始查询用户');
    console.log(userMsg);
    let order = yield two(userMsg);
    console.log(order);
    let goods = yield three(order);
    console.log(goods);
}
let iterotator = myFn();
iterotator.next();

• 打印结果

that's all