简介:生成器在生成的过程中需要利用到迭代器,关于迭代器的使用与操作在下期会发布,期待个位粉丝的阅览。生成器本身是一个特殊的函数,生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数不同。执行生成器函数,返回的是一个迭代器对象,通过iterator.next()调用执行函数内语句,用yield 的分隔符让语句分段执行。
生成器分段介绍:
function *Into(num){
//第一段
yield num * 2;
console.log('第一步');
//第二段
yield num * 4;
console.log('第二步');
//第三段
yield num * 8;
console.log('第三步');
}
const temp = Into(10);
//调用上一段执行的结果,由于“ yield num * 2;”这段代码前面没有执行语句,所以下面的第一个调用语句不会使上面打印出值
//其作用是让他获取空段,从而使下面的内容继续执行,
temp.next();
//经过上面获取了第一段前面的空段值后,那么下面获取的便是第二段前面的,即获取第一段处理的结果
temp.next(20);
//经过上面的执行语句,本次调用的便获取的是第二段的结果,下面的依次类推
temp.next(30);
temp.next(40);
temp.next(50);//便不再执行, 已经停止输出
通过上面的分段及介绍的讲解后,下面为个位粉丝展现一个项目,让您更好的去理解使用
css内容:
div{
width:400px;
height:200px;
margin:300px auto;
border:5px solid orangered;
background-color: orange;
color:#fff;
}
#add{
width:360px;
height:40px;
font-size:20px;
text-align: center;
margin-left:21px;
}
#text{
width:360px;
height:40px;
font-size:20px;
text-align: center;
margin-left:21px;
}
button{
width:360px;
height:40px;
font-size:30px;
margin-left:19px;
line-height:40px;
}
HTML内容:
<div>
<p id="add"></p>
<p id="text"></p>
<button>点击按钮</button>
</div>
js内容:
项目要求:点击按钮,加载数据....,数据加载完成后影藏(加载数据文字)
let tep = document.querySelector('#add');
let tabs = document.querySelector('#text');
let btn = document.querySelector('button');
//第一段
function step_1() {
setTimeout(() => {
let dell = '正在加载中....';
box.next(dell);
tep.innerHTML=dell;
})
}
//第二段
function step_2() {
setTimeout(() => {
let tost = '姓名:张三;年龄:19';
box.next(tost);
tabs.innerHTML=tost;
}, 2000)
}
//第三段
function step_3() {
tep.innerHTML = '';
}
//生成器部分
function *Info(){
let al = yield step_1();
let all = yield step_2();
let doll = yield step_3();
}
let box = Info();
//监听点击事件
btn.addEventListener('click',()=>{
box.next();
})
有疑问的粉丝可以私信博主进行咨询:
实现效果:
简介生成器的传参,很多粉丝会有疑惑,let al = yield num*2语句,经过调用传值,所获得的结果al是否是一个值,首先和大家解释一下,该生成器主要用于判断方面,所以该生成器中的yield具有分隔符的效果(截断),所以这是两部分内容,al与num*2是两部分内容,al返回的是undefined,而num*2返回的是你传入的值,即第一段在第一次调用中不会执行,上面有解释,因获取当前段的前面一段并非不会获取当前段的值。或者粉丝朋友可以这样操作,console.log(yield num*2)返回的是一个传入的数值,而你要是单独去研究打印al,那么返回的便是undefined。