JS Event Loop(이벤트 루프)

JS Event Loop 이벤트 루프

1.

main 함수에 대한 호출은 먼저 스택으로 푸시된다. (프레임으로써 푸시된다) first pushed into the stack 

브라우저는 main 함수의 첫 번째 명령문인 console.log ( 'A') 를 스택으로 푸시한다. main function into the stack which is console.log(‘A’). 

이 문이 실행되고 완료되면 해당 프레임이 튀어 나온다. 알파벳 A가 콘솔에 표시된다.

2.

콜백 exec () 및 0ms 대기 시간이있는 다음 명령문 (setTimeout ())이 호출 스택으로 푸시되고 실행이 시작된다.

setTimeout 함수는 브라우저 API를 사용하여 제공된 함수에 대한 콜백을 지연한다. 

그런 다음 브라우저로의 핸드 오버가 완료되면 (타이머의 경우) 프레임 (setTimeout 포함)이 튀어 나온다.

3.

console.log ( 'C')는 exec () 함수에 대한 콜백을 위해 브라우저에서 타이머가 실행되는 동안 스택에 푸시된다. 

지연이 0ms 였기 때문에 브라우저가 메시지를 받자 마자 (이상적으로) 콜백이 메시지 대기열에 추가된다.

4.

main 함수에서 마지막 명령문을 실행 한 후 main () 프레임이 호출 스택에서 튀어 나와 비어있게 만든다.. 

브라우저가 대기열에서 호출 스택으로 메시지를 푸시하려면 먼저 호출 스택을 비워야한다.

그렇기 때문에 setTimeout ()에 제공된 지연이 0 초라도 exec ()에 대한 콜백은 호출 스택의 

모든 프레임 실행이 완료 될 때까지 대기해야한다.

5.

이제 콜백 exec ()가 호출 스택으로 푸시되고 실행된다. 알파벳 C가 콘솔에 표시된다. 

이것이 자바 스크립트의 이벤트 루프다.

요약

- main 함수 프레임이 호출 stack에서 pop되어 empty 상태여야한다.

- 그러므로 지연시간이 0초라도 스택이 비워져 있어야 한다.

- 스택이 비워지면 실행하게 된다.

setTimeout은 0초를 지연하고 while 루프는 3초 동안 실행 되더라도 exec() 콜백은 메시지 대기열에 고정되어 있다. 

while 루프는 3 초가 경과 할 때까지 호출 스택 (단일 스레드)에서 계속 실행된다.

그리고 호출 스택이 비게되면 콜백 exec()가 호출 스택으로 이동되어 실행된다.

따라서 setTimeout ()의 지연 인수값은 타이머가 지연을 마친 후에 실행 시작을 보장하지 않는다.