자바스크립트를 공부하게 되면, setTimeout, setInterval은 특정 시간 이후에 어떤 일을 실행 하거나 반복 하기위하여 책에서 다루는 것을 볼 수 있다. 그러한 책들에는 설명이 ms를 지정하면, 해당 시간에 특정 함수를 실행 혹은 반복 해준다는 것으로 설명을 하지만.... 실제로 설정한 ms 실행이 되는가?
처음에 공부할 때는 대부분의 개발자, 학생분들이 해당 의문을 가지기에는 힘들고, 실제로 추후에 사용 할 때에, 당하고 나서야... 아, 실제로는 ms설정 한 것이 최소 대기시간이구나 하고 느끼는 분들이 많을 것이다.
그렇다면 왜 그럴까? 자바스크립트는 왜 해당 시간에 실행을 해주지 않는 것일까?
힙: 노란 네모로 표시 된 네개가 객체라고 보면 되고, 회색은 메모리 영역이라고 보면 된다.
스택: 초록색 네모로 그려져있는 것이 함수 호출이라고 보면 된다. 보통 콜스택이라고 부르는데 크롬 디버거에서 쉽게 확인 할 수 있다.
위 처럼 함수 호출하게 되면 foo가 bar를 실행 하게 되었을 시 위와 같이 함수 들이 스택에 쌓이며 당연하게도 선입후출(First In, Last Out)의 구조이다. 큐: 노란색 영역은 메시지 대기열이며, 빨간색은 메시지 이다. 메시지는 할 일 정도로 보면 편안하다. (일반적으로 이 큐는 태스트 큐라고 불린다.)
메시지들은 이벤트 루프 중에 먼저 들어온 메시지 부터 처리가 된다. 문제는 메시지의 처리가 아무때나 되는 것이 아니라, 스택이 모두 비워지고 나서, 메시지를 처리한다.
***A메시지가 실행 되면 끝날때까지 실행 되고 나서 B메시지가 실행 된다.
=> C언어 처럼 A쓰레드가 foo함수를 실행중에 중단 하고 B쓰레드의 bar함수를 실행 하는 것이 불가능하다.
setTimeout은 콜스택에 쌓일까? 태스크큐에 쌓일까? 당연하게도 setTimeout은 콜스택에 쌓인다.
console.log('----main stack start----')
console.log(setTimeout(function() {
console.log('----other stack----')
}, 0))
console.log('----main stack end----')
위의 코드를 실행 시켜보면 결과는 아래와 같다. 일단 아래의 undefined는 console.log의 리턴값이니 무시하고 보자.
사실 setTimeout이 콜스택에 쌓인다는거로 말장난 해보았다. 뭐 다들 예상하셨겟지만, setTimeout의 인자로 넣은 함수는 딜레이 후에 메시지 큐에 쌓이게 되며 결과는 위와 같고, 당연하게도 setTimeout 함수 자체의 실행은 위의 실행 결과에 "1" 이라고 적혀있는 timeoutID이다. 거짓말은 하지 않았다.
메시지 큐에 담기는 상황은 여러가지가 있는데 당연하게도 setInterval에 넣은 함수 또한 반복시간마다 메시지큐에 쌓이며, 사용자들의 클릭 액션등 이벤트 리스너에 등록한 함수들도 메시지 큐에 쌓인다.
댓글
댓글 쓰기