선생님 ! setTimeout에 관하여 질문이 있습니다!

Question

선생님 안녕하세요 강의 정말 잘 보고 있습니다. 자바스크립트 개념이 너무나 어려워, 프로젝트를 진행하면서 공부하겠다고 마음먹고 선생님의 강의를 보니 정말 실제로 활용이 이렇게 되는 부분이구나 하고 알 수 있어서 행복합니다..!! 사실 강의를 보다가 제가 이해를 잘못한 것인지 여쭙고 싶은 부분이 있어 질의를 드리게 되었습니다. setTimeout에 관한 부분인데요. 1단계 상수 main은 HTML문서의 #main을 호출한다. 상수 qna는 HTML 문서의 #qna를 호출한다 2단계 begin 함수 생성 begin 함수는 상수 main의 스타일에 CSS스크립트에 명시한 keyframes fadeOut을 1초동안 준다. 3단계. 450ms를 기다린 후에 1번째 setTimeout 메서드가 등장한다. 그리고 다시 450ms를 기다린 후에 2번째 setTimeout이 등장한다. 그런데 모질라의 글을 계속 보다보니까, 다음과 같은 부분을 발견했습니다. "setTimeout()은 비동기 함수로서, 함수 스택의 다른 함수 호출을 막지 않습니다. 달리 말하자면, setTimeout()을 사용해서 다음 함수 호출을 "일시정지" 할 수는 없습니다." 이해해보자면 첫번째 setTimeout이 두번째 setTimeout을 기다리는게 아니고, 동시에 실행된다는 것인데, 자세히 보면 setTimeout 메서드는 두 개가 아니고,​ 바깥쪽 setTimeout에 안쪽 setTimeout이 포함되어 있었습니다. 그래서 아래와 같은 함수로 조금 수정을 해보았습니다. function begin(){ main.style.WebkitAnimation = "fadeOut 1s"; main.style.animation = "fadeOut 1s"; main.style.MozAnimation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; qna.style.MozAnimation = "fadeIn 1s"; main.style.display = "none"; qna.style.display = "block"; } ,900); 위와 같은 함수로 바꾸어 실행해보니, 똑같이 작동함을 알게되었는데, 1초는 짧기에 10배를 늘려서도 보고, 450,450으로 나뉜것을 800,100 / 100,800으로 나누어 실행하여도 똑같이 작동됩니다. 그래서 이해하기를 안쪽과 바깥쪽에 걸어놓았던 delay 450ms는 900ms가 되어 하나의 delay로 작동한다는 것으로 이해했는데, 이게 올바로 이해한 부분일까요?

판다코딩 · Answer

어떠한 doc를 읽으셨는지 확인할 수 없어서 첨언해드리기 조금 조십스럽습니다. 제 생각에는 setTimeout을 이용하여, js를 비동기적으로 실행하고자 할 때의 주의사항을 읽으신 것 같습니다. (setTimeout을 사용하여 js를 비동기적으로 실행되는 것은 보장되지 않습니다.) 기존애 setTimeout과 관련되서는, 처음에 서술하신 부분이 맞습니다. 다만, 코드를 바꾸셨을 때 제대로 실행되는 이유는 (혹은 실행되는 것처럼 보이는 이유는) 저희 이번 프로젝트에서 qna와 main 모두 1초의 애니메이션을 가지고 있기 때문입니다. 아래 두 코드를 실행해보시면 차이점을 더 명확히 아실 수 있을 것 같습니다. setTimeout(function () { console.log("1"); setTimeout(function () { console.log("2"); setTimeout(function () { console.log("3"); }, 1000); }, 1000); }, 1000); setTimeout(() => { console.log("1"); console.log("2"); console.log("3"); }, 3000);