生成器函數 格式
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>