개발공부/Javascript
#기본기20_콜스택, 이벤트 루프, 비동기에 대하여
킴승
2024. 4. 12. 00:44
이벤트 루프는 비동기 함수를 태스크 큐로 보내고
콜스택이 비워지면 태스크큐에서 콜스택으로 이동한다고 한다.
콜스택에 먼저 스택이된 함수부터 실행이 되고
그 이후에 비동기 함수들이 실행된다는 뜻이다.
함수 실행순서를 1. 비동기 함수 2. 일반 함수 3. 일반 함수 로 실행해도
2->3->1 순으로 실행이 된다.
// 지연시키는 함수
function delay(n){
for (let i = 0; i < n; i++) {
console.log('delaying...');
}
}
// 콜스택 함수(일반함수)
function a() {
delay(1000)
console.log('a is activated!');
}
// 콜스택 함수(일반함수)
function b() {
console.log('b is activated!');
}
// 이벤트 루프에 의해 실행되는 함수, 비동기 함수
function c(){
setTimeout(() => {
console.log('c is activated!');
}, 0);
}
// 동기적으로 c => a => b 순서로 실행될 것 같지만, setTimeout함수는 비동기 함수이기 때문에 a => b => c 순서로 실행된다.
// setTimeout 함수는 이벤트루프에 의해 태스크큐로 이동되고, a와 b가 콜스택에서 사라진 이후 콜스택으로 이동하여 실행된다.
c();
a();
b();
c();
a();
b();
로 코드가 작성되었으나, 실행결과는
a();
b();
c();
로 나오게 된다.
문제는 a함수에서 for문이 1000번 돌고나서 다음코드가 실행된다는 점인데,
이렇게 처리를 할 경우 for문이 완료될 때까지 병목현상이 발생하게 된다.
해결방법은 for문을 비동기처리하면 된다.
c => a => b 했는데 a => b => c 나온 것과 동일한 방법으로 setTimeout으로 콜백함수로 변경한다.
이렇게 변경하면 for문으로 인해 다음 코드가 정체되지 않고 먼저 실행된 이후 for문은 이후에 실행되게 된다.
비동기처리 되어 태스크큐로 이동 후 콜스택이 끝난 후 실행되는 것이다.
// 지연시키는 함수
function delay(n){
setTimeout(() => {
for (let i = 0; i < n; i++) {
console.log('delaying...');
}
}, 0)
}
알기 쉽게 설명이 나와있는 사이트
그 외 참고 사이트
https://meetup.nhncloud.com/posts/89