ES6 Generator 의 응용 장면

기초 지식
API 문서
 
ES6 가 탄생 하기 전에 비동기 프로 그래 밍 방법 은 다음 과 같은 네 가지 가 있 었 다.

리 턴 함수

사건 감청

게시 / 구독

Promise 대상

Generator 함수 가 자 바스 크 립 트 비동기 프로 그래 밍 을 새로운 단계 로 가 져 왔 습 니 다.
2. 응용 장면
1. 예 를 들 어 추첨 코너 에서 현재 사용 자 는 5 번 추첨 할 수 있 습 니 다.클릭 후 횟수 를 1 감소 합 니 다.
ES5 방식 을 사용 하고 Generator 를 사용 하지 않 으 면 count 를 전역 변수 에 저장 해 야 합 니 다. 그러나 이것 은 매우 안전 하지 않 습 니 다. 변수 가 무엇 인지 다른 사람 이 알 면 변 수 를 수정 할 수 있 습 니 다.전역 변 수 를 저장 하 는 것 도 성능 에 영향 을 줄 수 있 습 니 다.

{
    let draw=function(count){
        //      ，          
        //      
        console.log(`  ${count} `)
    }
　　 //  Generator    
    let residue=function*(count){
        while(count>0){
            count--
            yield draw(count)
        }
    }
　　// Generator   ，      ，    next，    
    let star=residue(5)
    let btn=document.createElement('button')
    btn.id='start'
    btn.textContent='  '
    document.body.appendChild(btn)
    document.getElementById('start').addEventListener('click',function(){
        star.next()
    },false)
}

 2. 긴 폴 링
장면: 서버 의 특정한 데이터 상태 가 정기 적 으로 변화 하고 전단 은 정기 적 으로 서버 에 가서 이 상 태 를 찾 아야 합 니 다.
이런 장면 에 대해 서 는 두 가지 해결 방안 이 있다.
1) 긴 폴 링 (타이머, 정시 액세스 인터페이스)
2) 웹 소켓 (브 라 우 저 호환성 이 좋 지 않 음)

{
	let ajax=function* (){
		yield new Promise(function(resolve,reject){
			setTimeout(function(){
				resolve({code:0})
			},200)
		})
	}

	let pull=function(){
		let generator=ajax()
		let step=generator.next()
		step.value.then(function(d){
			if(d.code!=0){
				setTimeout(function(){
					console.log('wait')
					pull()
				},1000)
			}else{
				console.log(d)
			}
		})
	}

	pull()
}

 출력 결과

{code: 0}

resolve ({code: 0}) 에서 code 를 1 로 바 꾸 면 계속 문의 하고 출력 결 과 는?

wait
wait
wait
...

　　
 
다음으로 전송:https://www.cnblogs.com/knyel/p/7844787.html