es6的生成器函数与什么是回调地狱与解决回调地狱-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    /*
    生成器是异步编程的一种办法,他本身是迭代器,
    他的使用就是在函数function 与函数名之间加一个*
    他的要使用函数内的语句需要调用next()方法执行里面的语句
     */
    function * scq(){
        console.log("jk");
        console.log("jk");
        console.log("jk");
    }
    let iterator=scq();
    console.log("已经是调用状态但未执行语句");
    iterator.next();
    console.log("生成器函数的语句执行了,但是全部执行了,没有遍历的性质");
    /*
    所以出现了新的关键字yield,yield 是函数运行分段关键字 这个生成器每次执行只会执行到yield 语句; 的分号这里
    所以next每次只能遍历到一个yield的结束语句,但不会返回yield的语句
    若果打印next方法会返回yield的语句
     */
    function * scq1(){
        console.log("1");
        yield "你";
        console.log("2");
        yield "我";
        console.log("3");
        yield "他";
        console.log("4");
    }
    let iterator1=scq1();
    // iterator1.next();
    // iterator1.next();
    // iterator1.next();
    // iterator1.next();
    console.log(iterator1.next());
    console.log(iterator1.next());
    console.log(iterator1.next());
    console.log(iterator1.next());
    /*
    若是给生成器函数的.next()方法传参, 传入的是第几次的next yield 语句的 就会返回一个next()中的参数给函数内部的下一次调用所使用;
     */
    function * scq2(c){
        console.log("1"+c);
        let i1=yield "你";
        console.log("2"+i1);
        let i2= yield "我";
        console.log("3"+i2);
        let i3= yield "他";
        console.log("4"+i3);
    }
    let iterator2=scq2("t");
    iterator2.next("t");
    iterator2.next("t");
    iterator2.next("t");
    iterator2.next("t");
    /*********************
     * 下面是回调地狱
     */
    setTimeout(()=>{
        console.log("111111111");
        setTimeout(()=>{
            console.log("222222222");
            setTimeout(()=>{
                console.log("333333333333");
                //.......想这样因为要先达成最外层的条件然后再往内层调用,过多的逻辑会造成代码的可读性差,可修改性差代码的缩进会不断向前更是难以阅读
            },3000)
        },2000)
    },1000)
    /*
    利用生成器函数解决回调地狱
     */
    function * hddy(names){
       let name=yield begin(names);
       let sex=yield Sex(name);
             yield Describe(sex);
    }
    function begin(name){
        let data=name;
        setTimeout(()=>{
            if (data!=null||data!=undefined) {
                console.log("姓名:"+data);
                iteratorcc.next(data);
            }
        },1000);
        //不用返回 yield 返回的参数是你迭代器调用next的参数
    }
    function Sex(name){
        let sex="男";
        setTimeout(()=>{
            if (name.length<=1) {//不引战奥,纯属玩玩,
                console.log("性别:女");
                sex="女";
                iteratorcc.next(sex);
            }else{
                console.log("性别:男");
                sex="男";
                iteratorcc.next(sex);
            }
        },2000);
    }
    function Describe(sex){
        setTimeout(()=>{
            if (sex==="男") {
                console.log("描述:成功男士");
            }else{
                console.log("描述:成功女士");
            }
        },3000);
    }
    let iteratorcc=hddy("额");
    iteratorcc.next();
</script>
</body>
</html>