setTimeout함수 질문

Question

안녕하세요.  수업 듣던 중 setTimeout함수가 잘 이해가 가지 않아서 여러가지 찾아보던 중 궁금한 사항이 있어서 질문 올립니다. 수업 때 버튼을 클릭 했을 때 begin() 함수가 실행되게끔 하기 위해서 function   begin () {      main . style . animation  =  "fadeOut 1s" ;      main . style . WebkitAnimation  =  "fadeOut 1s" ;      setTimeout (()  =>  {          qna . style . animation  =  "fadeIn 1s" ;          qna . style . WebkitAnimation  =  "fadeIn 1s" ;          setTimeout (()  =>  {              main . style . display  =  "none" ;              qna . style . display  =  "block" ;         },  450 )     },  450 ); } 위와 같은 코드를 짜주셨는데 setTimeout함수가 조금 어려워서 여러 내용을 찾고 이것저것 수정해보다가 function   begin () {      main . style . animation  =  "fadeOut 1s" ;          setTimeout (()  =>  {              main . style . display  =  "none" ;              qna . style . display  =  "block" ;              qna . style . animation  =  "fadeIn 1s"         },  950 ); } 위와같이 코드를 바꿔봤더니 실행결과는 똑같이 나오는 것으로 확인되었습니다. 아직도 setTimeout함수가 머릿속에서 잘 정리가 되지 않은상황이라 그런데 이렇게 코드를 짜게 될 경우 어떤 문제가 발생할 수 있는 요인이 있을까요?

판다코딩 · Answer

setTimeout함수는 정해진 시간 이후에 내부의 코드를 실행시켜주는 함수입니다. 첫번째 사진의 코드에서는, main fadeOut > (450ms) > qna fadeIn > (450) > main display none, qna display block 의 순서로 코드들이 실행될 것이고, 두 번째 사진의 코드에서는 main fadeOut > (950ms) > main display none, qna display block, qna fadeIn 입니다. 뚜렷하게 발생할 수 있을만한 문제는 없을 것 같으나, 아무래도 1번의 흐름이 보다 자연스럽지 않을까요?

khhan1990 · Answer

정리가 확 되는 것 같네요! 감사합니다!