setTimeout함수 질문

안녕하세요.

수업 듣던 중 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함수가 머릿속에서 잘 정리가 되지 않은상황이라 그런데 이렇게 코드를 짜게 될 경우 어떤 문제가 발생할 수 있는 요인이 있을까요?

인프런 커뮤니티 질문&답변