-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
setTimeout함수 질문
21.07.07 11:28 작성 조회수 164
1
안녕하세요.
수업 듣던 중 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함수가 머릿속에서 잘 정리가 되지 않은상황이라 그런데 이렇게 코드를 짜게 될 경우 어떤 문제가 발생할 수 있는 요인이 있을까요?
답변을 작성해보세요.
1
판다코딩
지식공유자2021.07.07
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번의 흐름이 보다 자연스럽지 않을까요?
0
답변 2