ES6: Introduction to Generator and Scenario Application

---

1. Generator function

In JavaScript, once a function starts executing, it executes to the end or when it encounters a return, and there is no code that can pause the execution while the function is running.
The emergence of the Generator generator function makes such an impossible possible.
Generator function is an asynchronous programming solution provided by ES6, and its form is slightly different from ordinary functions:

• The function keyword followed by an asterisk (*)
• The yield statement can pause a function

function* fn(x) {
    
    
	yield ++x	//第一个暂停点
	yield ++x	//第二个暂停点
	yield ++x	//第三个暂停点
}
let g = fn(0)
g.next() // {value: 1, done: false}
g.next() // {value: 2, done: false}
g.next() // {value: 3, done: false}
g.next() // {value: undefined, done: true}

We can see from the above example:

• In the fn generator function, three pause points are generated via the yield keyword.
• And when we call the fn function, it will return a traverser object g , the traverser object has a next method , the next method can resume execution, and the yield expression is a mark to suspend execution.
• Each time the next function is called, an object will be returned, and the object will have a value attribute and a done attribute (value indicates the value of the pause point expression (the value after yield), and done indicates whether the traversal is completed)

In fact, the Generator function will return an object with an Iterator interface. The Generator generator is mainly discussed here. If you are interested, you can read this article to understand what the Iterator interface is: https://blog.csdn.net/weixin_60297362/article/ details/122838780

next method

Under normal circumstances, when the next method does not pass in parameters, the return value of the yield expression is undefined. When a parameter is passed in to next, the parameter will be used as the return value of yield in the previous step.

function* fn(x) {
    
    
	var x = yield ++x	//第一个暂停点
	console.log(x);
	var y = yield ++x	//第二个暂停点
	console.log(y);
	var z = yield ++x	//第三个暂停点
}
let g = fn(0)
console.log(g.next())
console.log(g.next(1))
console.log(g.next(2))

return method

The return method returns the given value and ends the traversal of the Generator function.
When the return method provides a parameter, it returns the parameter; when no parameter is provided, it returns undefined.

function* fn(x) {
    
    
  yield ++x	//第一个暂停点
  yield ++x	//第二个暂停点
  yield ++x	//第三个暂停点
}
let g = fn(0)
g.next(0) // {value: 1, done: false}
g.return('foo') // {value: 'foo', done: true}
g.next()  // {value: undefined, done: true}

2. Application: Solve Js asynchronous programming (callback hell)

Requirement: print 111 after 1s, print 222 after 2s, print 333 after 3s

1. No generator generator

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

2. Use generator generator

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() //执行第一个暂停点