The principles and methods of using the generator and using the generator to realize simple projects (including detailed explanation and parameter transmission)

brief introduction ： The generator needs to make use of iterator , The use and operation of iterators will be released next time , Looking forward to the reading of fans . The generator itself is a special function , The generator function is ES6 An asynchronous programming solution provided by , Syntax behavior is different from traditional functions . Execute the generator function , Returns an iterator object , adopt iterator.next() Call to execute the statement in the function , use yield The delimiter of allows the statement to be executed in segments .

Generator segment introduction :

function *Into(num){
                 // The first paragraph
                 yield num * 2;
                console.log(' First step ');
                 // The second paragraph
                 yield num * 4;
                 console.log(' The second step ');
                  // The third paragraph
                 yield num * 8;
                  console.log(' The third step ');
            }
           const temp = Into(10);
           // Call the result of the execution of the previous paragraph , because “ yield num * 2;” There is no execution statement in front of this code , So the first call statement below will not make the value printed above
           // Its function is to let him get empty segments , So that the following content can be continued ,
           temp.next();
           // After obtaining the empty segment value in front of the first segment above , Then what we get below is the one before the second paragraph , That is, get the result of the first processing
           temp.next(20);
           // After the above execution statement , What we call this time is the result of the second paragraph , And so on
           temp.next(30);
           temp.next(40);
           temp.next(50);// No longer , Output has been stopped

After the above paragraphs and introduction , Here is a project for fans , Let you better understand and use

css Content ：

 div{
				width:400px;
				height:200px;
				margin:300px auto;
				border:5px solid orangered;
				background-color: orange;
				color:#fff;
			}
			#add{
				width:360px;
				height:40px;
				font-size:20px;
				text-align: center;
				margin-left:21px;
			}
			#text{
				width:360px;
				height:40px;
				font-size:20px;
				text-align: center;
				margin-left:21px;
			}
			button{
				width:360px;
				height:40px;
				font-size:30px;
				margin-left:19px;
				line-height:40px;
			}

HTML Content ：

<div>
			<p id="add"></p>
			<p id="text"></p>
			<button> Click button </button>
		</div>

js Content ：

Project requirement ： Click button , Load data ...., After the data is loaded, it is hidden （ Load data text ）

let tep = document.querySelector('#add');
            let tabs = document.querySelector('#text');
            let btn = document.querySelector('button');
            // The first paragraph
            function step_1() {
                setTimeout(() => {
                let dell = ' Loading ....';
                  box.next(dell);
                  tep.innerHTML=dell;
                })
            }
            // The second paragraph
            function step_2() {
                setTimeout(() => {
                let tost = ' full name : Zhang San ; Age :19';
                box.next(tost);
                tabs.innerHTML=tost;
                }, 2000)
            }
            // The third paragraph
            function step_3() {
                tep.innerHTML = '';
            }
            
             // Generator section
            function *Info(){
            let al = yield step_1();
            let all = yield step_2();
            let doll = yield step_3();
            }
            let box = Info();
            // Monitor click events
            btn.addEventListener('click',()=>{
                box.next();
            })
            

Fans who have questions can consult with bloggers in private ：

Realization effect ：

Introduce the parameters of generator , Many fans will have doubts ,let al =  yield num*2 sentence , Pass value through call , The results obtained al Is it a value , First of all, let me explain to you , The generator is mainly used for judging , So in this generator yield With the effect of separator （ truncation ）, So this is two parts ,al And num*2 There are two parts ,al The return is undefined, and num*2 The returned value is the value you passed in , That is, the first segment will not be executed in the first call , There's an explanation , Because getting the previous segment of the current segment does not mean that the value of the current segment will not be obtained . Or fans can do this ,console.log(yield num*2) The returned value is an incoming value , And if you study printing alone al, Then the return is undefined.