标签：console log generator yield next go 你好
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>
标签：console,log,generator,yield,next,go,你好 来源： https://blog.csdn.net/zhangyiyang111/article/details/114685619
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。