Generator
1.Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。
Generator函数有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield语句，定义不同的内部状态。
1 { 2 // Generator函数 * , yield 3 let tell = function* (){ 4 yield 'a'; 5 yield 'b'; 6 return 'c'; 7 }; 8 let say = tell(); 9 console.log(say.next()); //输出结果与iterator类似，实际上是实现了Symbol.iterator接口 10 console.log(say.next()); 11 console.log(say.next()); 12 console.log(say.next()); 13 }
2，使用Generator实现对象遍历
1 { 2 let obj = {}; 3 obj[Symbol.iterator] = function* (){ 4 yield 1; 5 yield 2; 6 yield 3; 7 } 8 for(var value of obj){ 9 console.log("value",value) 10 } 11 }
3，状态机实现循环
1 { 2 let state= function* (){ 3 while(1){ 4 yield 'a'; 5 yield 'b'; 6 yield 'c'; 7 } 8 } 9 let status = state(); 10 console.log(status.next()) //"a" 11 console.log(status.next()) //"b" 12 console.log(status.next()) //"c" 13 console.log(status.next()) //"a" 14 console.log(status.next()) //"b" 15 }
4.例子：a.实现抽奖环节
1 { 2 // 实例实现抽奖环节 3 let draw =function(count){ 4 // 具体抽奖逻辑 5 console.info('剩余抽奖次数：',count) 6 } 7 //次数限制 8 let rest= function* (count){ 9 while(count>0){ 10 count--; 11 yield draw(count); 12 } 13 } 14 let start = rest(5); //次数由服务器端传给前端 15 16 let btn = document.createElement("button"); 17 btn.id="startButton"; 18 btn.textContent="抽奖"; 19 document.body.appendChild(btn); 20 document.getElementById("startButton").addEventListener('click',function(){ 21 start.next(); 22 },false); 23 24 }
b.定时获取服务器端数据
1 { 2 // 定时取服务器端的数据 1.websocket(浏览器兼容性不好) 2.长轮询 3 // 长轮询 4 let ajax = function* (){ 5 yield new Promise(function(resolve,reject){ 6 setTimeout(()=>{ //模拟服务器返回值和响应时间 7 resolve({code:0}) 8 },1000) 9 }); 10 } 11 let pull = function(){ 12 let generator = ajax(); 13 let step = generator.next(); //返回值是promise对象，可以调用then方法进行回调 14 step.value.then(function(d){ 15 if(d.code != 0){ 16 console.info("await") 17 pull(); 18 }else{ 19 console.info(d) 20 } 21 }) 22 } 23 pull() 24 }
