generator

generator

1.简介

​ ES6提供的解决异步编程的方案之一,Generator函数是一个状态机, 可控制函数执行过程

​ 可暂停函数(惰性求值), 内部yield可暂停,外部调用next方法可启动,每次返回的是yield后的表达式结果

2.使用

​ 定义generator需要在function后面加上* ,调用函数不会打印任何函数数据,而是会返回一个指针对象

​ 调用指针对象中的next方法,来执行generator函数中的内容,返回结果和iteraator相似

// function mmm(){
//     yield '你好  世界1';
//     yield '你好  世界2';
//     yield '你好  世界3';
//     yield '你好  世界4';
// }

// 使用generator
function* myGenerator(){
    yield '你好  世界';
    yield '你好  中国';
    yield '你好  北京';
    yield '你好  朝阳';
    yield '你好  中公';
    yield '你好  优就业';
    yield '你好  Web1116';
    return 'Game Over';
}

let go = myGenerator();
// 调用函数的执行过程  使用go中的next方法
// 每一次调用执行yield后面的表达式  比如说第一次调用  出现你好  世界  返回的也是一个对象 和iterator比较相似
// 当第二次调用next方法的时候  那么出现的就是第二个yield后面的表达式
// 以此类推  一直到指针指向最后数据
console.log(go.next());
console.log(go.next());
console.log(go.next());
console.log(go.next());
console.log(go.next());
console.log(go.next());
console.log(go.next());
console.log(go.next());

3.案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        #app{
            width: 1200px;
            margin: 0px auto;
        }
        #app div{
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            border: 1px solid;
            text-align: center;
            margin-top: 2px;
        }
        button{
            width: 1200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            border: none;
            outline: none;
            background: rgb(247, 247, 247);
            color: rgb(80, 120, 255);
            display: block;
            margin: 20px auto;
        }
        button:hover{
            background: rgb(238, 238, 238);
            color: rgb(80, 120, 255);
        }
    </style>
</head>
<body>
    <div id="app">
        <div>加载出1——20条数据</div>
    </div>
    <button id="btn">点击加载更多</button>
</body>
</html>
<script>
function* loadData(){
    yield '加载出21——40条数据';
    yield '加载出41——60条数据';
    yield '加载出61——80条数据';
    yield '加载出81——100条数据';
    yield '加载出101——120条数据';
    yield '加载出121——140条数据';
    yield '加载出141——160条数据';
    return '没有更多数据了';
}

// 抓取节点
let btn = document.querySelector('#btn');
let app = document.querySelector('#app');

// 调用函数loadData
let go = loadData();

btn.onclick = function(){
    // 创建div节点  将数据存储在div节点中
    let data = go.next().value;
    if (data == undefined){
        return false;
    }else{
        let div = document.createElement('div');
        div.innerHTML = data;
        app.appendChild(div);
    }
}
</script>
上一篇:yield关键字的用法和用途


下一篇:aiomysql