ES6的Generator函数

ES6的Generator函数

ES6新增了Generator函数，Generator函数不同于其他函数，Generator函数可以将函数的执行流程挂起(暂停或停止函数的执行)

Generator函数
Generator函数在定义时有 * ，*号可以在function后面，也可以在函数名前。

function* funName(){}//放在function关键字后面
function *funName(){}//放在函数名前
//在对象中可以写在函数名前
let obj={
	*funName(){}
}

Generator函数除了*号，还有yield关键字，yield关键字有点类似return。

function *fn(){
	console.log("start");
	yield "start";
}

Generator函数不同于普通函数，Generator函数需要调用next开启执行，每次执行都会执行到下一个yield或者return关键字处停止。当return后，next再次调用，即使还有代码也不会执行。（代码诠释更能明白理解）

function *fn(){
	console.log("start");
	yield "start"
	console.log("progress");
	yield "progress"
	console.log("end");
	return "end"
	console.log("helloworld");
}
let f=fn();
f.next();//输出start，执行到yield "start"处暂停，返回值：{done:false,value:"start"}
f.next();//输出progress，执行到yield "progress"处暂停，返回值：{done:false,value:"progress"}
f.next();//输出end，执行到return "end"处停止，返回值：{done:true,value:"end"}
f.next();//没有任何输出，返回值：{done:true,value:undefined}，在return "end"处函数已经执行完成，后面的代码不会执行。

Demo：
点击按钮，先发送1号请求，1号请求完成之后再发送2号请求。

<button onclick="submit()">按钮</button>
<script>
let s=null;
function *_submit(){
	setTimeout(()=>{
		console.log("发送1号请求");
		s.next();
	},3000)
	yield
	setTimeout(()=>{
		console.log("发送2号请求");
	},2000)
	return
}
function submit(){
	s=_submit();
	s.next();
}
</script>

button元素绑定submit函数，按钮点击之后会获取Generator函数并让Generator函数先执行到第一个yield，等到setTimeout执行完成，回调函数输出“发送1号请求”，再让Generator函数执行到第二个yield或者return处。