비동기 처리: setTimeout

동기적 처리

• 요청한 순서대로 작업을 처리
• 코드가 나타나는 순서대로 순차적으로 동작
• 작동 순서를 예측하기 쉬움

비동기적 처리

• 특정 작업이 끝나기 전에 다음 작업을 수행
• 대표적으로 setTimeout 함수에 콜백함수와 timeout시간을 설정하면 만료될 때까지 기다리지 않고 다음 작업 수행
• js에서 실행하는 곳은 call stack이고 실행하기 전에 대기하는 곳은 queue인데, queue에 있는 것을 call stack으로 옮김.

console.log('1');
setTimeout(function(){
	console.log('2');
},3000);
console.log('3');

 

 

1번째

queue: main 함수

 

call stack

- x

 

실행: x

 

 

2번째

queue: x

 

call stack

- console.log(1)

- main 함수

 

실행: x

 

 

3번째

queue: x

 

call stack

- main 함수

 

실행:console.log(1)

 

 

4번째

queue: x

 

call stack

- setTimeout

- main 함수

 

외부 timer: x

 

실행: x

 

5번째

queue: x

 

call stack

- main 함수

 

외부 timer: setTimeout

 

실행

- js 외부의 timer에서 setTimeout 돌림

- 돌린 후에 결과값은 call stack이 아니라 queue에 저장함

- 눈에 보이는 실행은 없음

 

6번째

queue: setTimeout

 

call stack

- console.log(2)

- main 함수

 

실행: x

 

7번째

queue: setTimeout

 

call stack

- main 함수

 

실행: console.log(2)

 

8번째

queue: x

 

call stack

- setTimeout

- main 함수

 

실행: x

 

9번째

queue: x

 

call stack

- main 함수

 

실행: setTimeout

 

 

참고: https://youtu.be/iNH4UQxZexs