生成器函数 格式
function* 函数名(){
}
代码：
运行结果：
console.log(show().next());
才是真正运行show函数的方式。
生成器函数的使用，可以配合yield和next的配合，达到可以让函数无限次return的效果。
整体代码如下，具体讲解请参考下相关代码附近的注释。
另：附上之前的自动选择卡的讲解版的代码实现。
以上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}
#clickGroup,#autoGroup{
margin: 10px;
padding: 10px;
}
h1{
color:tomato;
}
#clickGroup>div,#autoGroup>div{
width: 200px;
height: 200px;
background-color: pink;
border: 1px salmon solid;
/* div都不显示 */
display: none;
}
/* 初始时候，只显示第一个div */
#clickGroup>div:first-of-type,#autoGroup>div:first-of-type{
display: block;
}
/* button:first-of-type{
background-color: pink;
} */
</style>
</head>
<body>
<h1>点击事件组</h1>
<div id="clickGroup">
<button id="btn1">选项1</button>
<button id="btn2">选项2</button>
<button id="btn3">选项3</button>
<div id="div1">DIV1</div>
<div id="div2">DIV22</div>
<div id="div3">DIV333</div>
</div>
<h1>自动播放组</h1>
<div id="autoGroup">
<button id="btn1">选项1</button>
<button id="btn2">选项2</button>
<button id="btn3">选项3</button>
<div id="div1">DIV1</div>
<div id="div2">DIV22</div>
<div id="div3">DIV333</div>
</div>
<script type="text/javascript">
// 函数生成器
// function* show(){
// alert(1);
// };
// console.log(show);
// console.log("=======1111111==========");
// console.log(show());
// console.log("=======2222222==========");
// console.log(show().next());
// console.log("=======3333333==========");
function* show1(){
yield function(){
console.log("点击1");
}
yield ()=>{
console.log("点击2");
}
yield function(){
// console.log("点击1");
document.body.style.backgroundColor='pink';
}
// next()只看yield，此时的return相当于无效。
// yield类似于return
// 不过他可以实现无限次return的效果
// 通过对next的调用
// return 10;
};
// 就当前这个注释掉的状态下，运行结果为：
// 第一次点击 =》 点击1
// 第二次点击 =》 点击2
// 第三次点击 =》 背景色变粉色
var k = show1();
// k.next().value();
// k.next().value();
// document.body['onclick']=()=>show1().next().value();
document.body['onclick']=()=>{
// 第一次点击
k.next().value();
}
// 那个自动选项卡的讲解版的实现
[...document.querySelectorAll('#clickGroup>button')].find(
// find 是循环，x 是 循环的元素， y 是下标
(x,y)=> {
// 这里的x 是每一个 button 元素
// 为每一个 x button元素 绑定onclick 事件
x['onclick'] = () => {
// 所有div 隐藏
[...document.querySelectorAll('#clickGroup>div')].find(
d=>{
d.style.display='none';
}
);
// 点到的div显示
[...document.querySelectorAll('#clickGroup>div')][y].style.display='block';
}
}
)
</script>
</body>
</html>