ES6——生成器解决回调地狱

 生成器一般用于解决回调地狱

生成器写法：function *(){} 

1. 函数名前面有一个*
2. 调用next()方法开始执行函数

3. yield为暂停

yield 它有两个属性，value和done，分别代表返回值和是否完成。

使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器的版本的return关键字

例：

function * gen(){
				console.log('My name is NanChen');
			}
			let iterator = gen()
			iterator.next()    //开始执行

打印效果：

 例2：

<script>
        function * gen() {
            console.log('--- 1 ---');
            yield 'eye'        // 使生成器函数执行暂停
            console.log('--- 2 ---');
            yield 'nose'
            console.log('--- 3 ---');
            yield 'head'
        }
        for(let item of gen()){
            console.log(item);
        }
    </script>

打印效果：

 回调地狱：经常因为某些逻辑导致写出一层嵌套一层的回调函数，如果嵌套的很多，将会极大的影响到代码逻辑和可读性，这种代码就被成为回调地狱。

例：

setTimeout(() => {
				console.log(111)
				setTimeout(() => {
					console.log(222)
					setTimeout(() => {
						console.log(333)
					}, 3000)
				}, 2000)
			}, 1000)

解决方法：把每层嵌套单独拿出来

	function one(){
				setTimeout(()=>{
					console.log('111');
					iterator.next()
				},1000)
			}
			function two(){
				setTimeout(()=>{
					console.log('222');
					iterator.next()
				},2000)
			}
			function three(){
				setTimeout(()=>{
					console.log('333');	
				},3000)
			}
			function * gen(){
				yield one()
				yield two()
				yield three()
			}
			let iterator = gen()
			iterator.next()

实现效果如下图：