TIL) 자바스크립트 비동기와 setTimeout

 

 

비동기란?
동시에 여러 작업을 해볼 수 있다!

 

자바스크립트는 단일 스레드 기반의 언어로 한 순간 하나의 작업만을 처리할 수 있다.

하지만 자바스크립트는 비 동기로 동작하기 때문에 단일 스레드에도 불구하고 동시에 많은 작업을 수행한다. => 비동기

=> 주의할 점! 자바스크립트 언어 자체가 비동기 동작을 지원하는 것은 아니다.

 

비 동기로 동작하는 핵심요소는 자바스크립트 언어가 아니라 브라우저가 가지고 있다.

브라우저는 Web APIs, Event Table, Callback Queue, Event Loop 등으로 구성되며 자바스크립트 코드가 실행될 때 브라우저와의 동작은 아래 그림으로 표현할 수 있다.

 

 

• Web APIs: setTimeout이 Call Stack에 들어와 실행되면 Browser API인 timer를 호출한다.
• Event Table: 특정 event(timeout, click, mouse move 등등)가 발생했을 때 어떤 callback 함수가 호출되야 하는지를 알고 있다. 
• Callback Queue: 이벤트 발생 시 실행해야 할 callback 함수가 Callback Queue에 추가된다.
• Event Loop: Call Stack이 비어있을 경우, Callback queue에서 함수를 꺼내 Call Stack에 추가한다.

 

 

👇아래 링크로 js event loop에 대해 이해할 수 있었습니다.👇

 

참조 *이벤트 루프*

https://medium.com/sjk5766/javascript-%EB%B9%84%EB%8F%99%EA%B8%B0-%ED%95%B5%EC%8B%AC-event-loop-%EC%A0%95%EB%A6%AC-422eb29231a8

---

 

setTimeout 함수

setTimeout 함수의 첫번째 인자는 기다린 후에 실행시킬 함수, 그 다음은 기다릴 밀리초(delay) 이다. 

 

하지만 setTimeout의 delay인자가 delay ms 후에 실행 되는 것을 보장하지 않는다. 정확히는 delay ms 후에 Callback Queue에 들어가는 것을 보장한다.

 

왜냐하면!

setTimeout의 delay ms 후에 이미 call stack에 다음 함수가 들어가 있다면, 즉 call stack이 비어있지 않다면 Event Loop는 callback queue에 있는 setTimeout의 결과 함수를 거들떠보지 않는다.