Generator
基本概念
Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
形式上
- Generator函数是一个普通函数，但是有两个特征。
- function关键字与函数名之间有一个星号*；
- 函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。
let tell=function* () {
yield 'a';
yield 'b';
yield 'c';
};
let k=tell();
console.log(k.next());
console.log(k.next());
console.log(k.next());
console.log(k.next());
上面代码定义了一个Generator函数tell，它内部有三个yield语句'a'，'b'和'c' ; 即该函数有三个状态：'a'，'b'和'c'语句（结束执行）。
总结一下，调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield语句后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。true：表示遍历结束，false：表示遍历没结束；
yield
需要注意的是，yield语句后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行，因此等于为JavaScript提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。
function* gen() {
yield 123 + 456;
}
上面代码中，yield后面的表达式123 + 456，不会立即求值，只会在next方法将指针移到这一句时，才会求值。
yield语句注意事项
- yield语句不能用在普通函数中，否则会报错。
- yield语句如果用在一个表达式之中，必须放在圆括号里面。
console.log('Hello' + yield); // SyntaxError
console.log('Hello' + yield 123); // SyntaxError
console.log('Hello' + (yield)); // OK
console.log('Hello' + (yield 123)); // OK
- yield语句用作函数参数或赋值表达式的右边，可以不加括号。
foo(yield 'a', yield 'b'); // OK
let input = yield; // OK
暂缓执行函数
Generator函数可以不用yield语句，这时就变成了一个单纯的暂缓执行函数。
function* f() {
console.log('执行了！')
}
var generator = f();
setTimeout(function () {
generator.next()
}, 2000);
上面代码中，函数f如果是普通函数，在为变量generator赋值时就会执行。但是，函数f是一个Generator函数，就变成只有调用next方法时，函数f才会执行。
Generator 与 Iterator接口的关系
任意一个对象的Symbol.iterator方法，等于该对象的遍历器生成函数，调用该函数会返回该对象的一个遍历器对象。
由于Generator函数就是遍历器生成函数，因此可以把Generator赋值给对象的Symbol.iterator属性，从而使得该对象具有Iterator接口。
//generator对象的新应用：给obj对象部署Iterator;
let obj={};
obj[Symbol.iterator]=function* () {
yield 1;
yield 2;
yield 3;
};
for(let value of obj){
console.log(value);
}
用Generator写抽奖
let draw=function (count) {
//具体抽奖逻辑
console.info(剩余${count}抽奖次数);
};
let residue=function* (count) {
while(count>0){
count--;
yield draw(count);
}
};
let star=residue(5);
let btn=document.createElement('button');
btn.innerHTML='点击抽奖';
document.body.appendChild(btn);
btn.onclick=function () {
star.next();
}
前端定时的去接收服务端的变化
- 两种办法：1）websocket-兼容性不好 ； 2)常轮询-看如下代码
let ajax=function* () {
yield new Promise((resolve,reject)=>{
setTimeout(function () {
resolve({code:0})
},200)
})
};
let pull=function () {
let generator=ajax();
let step=generator.next();
//拿回后台的数据
step.value.then(function (d) {
if(d.code!=0){
setTimeout(function () {
console.info('wait');
pull();
},1000)
}else{
console.log(d);
}
})
};
pull();
