首页 > 其他分享 >ES6-ES11 生成器函数的实例(解决回调地狱问题)

ES6-ES11 生成器函数的实例(解决回调地狱问题)

时间:2023-03-04 21:35:59浏览次数:52  
标签:function ES6 iterator 生成器 next let ES11 setTimeout

原视频

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数实例</title>
</head>

<body>
    <script>
        // 异步编程  文件操作 网络操作(ajax, request) 数据库操作
        // 1s 后控制台输出 111  2s后输出 222  3s后输出 333 
        // 回调地狱
        // setTimeout(() => {
        //     console.log(111);
        //     setTimeout(() => {
        //         console.log(222);
        //         setTimeout(() => {
        //             console.log(333);
        //         }, 3000);
        //     }, 2000);
        // }, 1000);

        function one(){
            setTimeout(()=>{
                console.log(111);
                iterator.next();
            },1000)
        }

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

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

        function * gen(){
            yield one();
            yield two();
            yield three();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成器函数</title>
</head>
<body>
    <script>
        //模拟获取  用户数据  订单数据  商品数据 
        function getUsers(){
            setTimeout(()=>{
                let data = '用户数据';
                //调用 next 方法, 并且将数据传入
                iterator.next(data);
            }, 1000);
        }

        function getOrders(){
            setTimeout(()=>{
                let data = '订单数据';
                iterator.next(data);
            }, 1000)
        }

        function getGoods(){
            setTimeout(()=>{
                let data = '商品数据';
                iterator.next(data);
            }, 1000)
        }

        function * gen(){
            let users = yield getUsers();
            let orders = yield getOrders();
            let goods = yield getGoods();
        }

        //调用生成器函数
        let iterator = gen();
        iterator.next();

        

    </script>
</body>
</html>

标签:function,ES6,iterator,生成器,next,let,ES11,setTimeout
From: https://www.cnblogs.com/chuixulvcao/p/17179204.html

相关文章

  • ES6-ES11 生成器函数声明与调用
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11 迭代器介绍
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><tit......
  • ES6-ES11 迭代器应用-自定义遍历数据
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • ES6-ES11 Symbol的内置属性
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • ES6-ES11 对象添加symbol类型的属性
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title......
  • ES6-ES11 Symbol的简介与创建
    原视频<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><titl......
  • 4.理解es6 class构造以及继承的底层实现原理
    javascript使用的是原型式继承,我们可以通过原型的特性实现类的继承,es6为我们提供了像面向对象继承一样的语法糖。1.类的实现class底层仍然是构造函数调用_classCallChe......
  • ES6标准的JS代码,是否能进码混淆加密?
    nodejs开发,使用es6标准的javascript代码,是否能进行代码混淆加密?回答是肯定的,能。使用JShaman就可以进行加密。以import语法为例,用一个node小工程进行测试:先准备两段代码,一个......
  • JavaScript模块化理解-CommonJS、AMD、CMD、UMD、ES6
    参考:JavaScript模块化-CommonJS、AMD、CMD、UMD、ES6前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS 在JS早期,使用script标签引入JS,会造成以下问题:加载的时候阻塞......
  • ES6 简单笔记2
        26.ES6Promise简介<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......