generator函数: 可以通过yield关键字,将函数挂起,为了改变执行流的顺序;
generator函数作用:部署异步操作ajax,异步操作同步化;
与普通函数的区别:
1.function后面 函数名之前有个。
2.只能在函数内部使用yield表达式,让函数挂起 。
写法
function* func() {
yield //执行语句;
yield //执行语句;
}
执行生成器函数
function* func() {
yield 2;
yield 3;
}
let fn = func();//获取generator函数迭代器
console.log(fn.next());//执行yield后面的语句,在下一个next方法调用时将等待,并返回{value:2,done:false}
console.log(fn.next());//执行,并返回{value:2,done:false}
console.log(fn.next());//执行,并返回{value:undefined,done:true}
fn.next()调用时,将执行yield后面的语句,并在下一次调用next方法前继续等待,next(param)中的参数将返还给正在等待的yield
应用场景:
**1.部署异步操作ajax,异步操作同步操作 **
<script>
function* main() {
let res = yield request('');
console.log(res);
}
function request(url) {
$.ajax({
url,
method: 'get',
success(res) {
ite.next(res);
}
});
}
const ite = main();
ite.next();
</script>
2.异步加载页面
<script>
//模拟异步操作
//创建生成器函数
function* load() {
loadUI();
yield showData();
hideUI();
}
function loadUI() {
console.log("加载loading...页面");
}
function showData() {
setTimeout(() => {
console.log("数据加载完毕");
ite.next();
}, 1000);
}
function hideUI() {
console.log("隐藏UI");
}
let ite1 = load();
ite1.next();
</script>
切记:yield不仅可以阻塞当前执行顺序,也可以接受后面执行语句中调用next时所传递的参数