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>