setTimeout 에 관하여 질문있습니다.
setTimeout하고 setInterval을 좀 더 잘 이해하기 위해서 간단한 출력물을 만들어봤는데요.
"5초 이내 구매시 사은품 증정" 이라는 문구가 4 , 3, 2, 1 로 바뀌고 5초가 지나면, 문구 자체가 사라지는 구조입니다.
Q1. timer라는 변수에 담아줬을 뿐인데, 왜 변수 안에 담겨진 setInterval()이 즉시 실행되는 건가요?
다시 말해서, timer();를 안 했는데도 실행되는 이유가 궁금합니다. 이 상황 너무 혼란스러워요;;;
Q2. setTimeout()을 5초로 맞춰놓으면, 마지막 "1초"가 출력이 안 되고 바로 display: none;이 발생하는데요.
아마도, setInterval()이 1초 늦게 실행되서 그러는 것같습니다.
왜 setInterval()이 setTimeout()보다 1초 늦게 실행되는 걸까요??
- 해당 코드를 바로 실행해볼 수 있게 Codepen 링크도 올리겠습니다.
https://codepen.io/uscgil0127/pen/GRQQMzB
- 질문 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="alert alert-danger">
<span> 5초 이내 구매시 사은품 증정 </span>
</div>
</body>
<script>
const sp = document.querySelector("span");
let count = 5;
let timer = 0;
document.addEventListener("DOMContentLoaded", function () {
// Q1. timer 라는 변수에 할당만 해줬을 뿐인데, 왜 함수가 즉시 실행되는지 이해가 안 됩니다.
timer = setInterval(thisThisOne, 1000);
// Q2. setTimeout 5초로 맞춰놓으면, "1초"가 안 보이고 바로 display: none;이 되버리네요.
setTimeout(tryThis, 6000);
});
function tryThis() {
sp.style.display = "none";
}
function thisThisOne() {
if (count === 0) {
clearInterval(timer);
}
sp.textContent = `${count}초 이내 구매시 사은품 증정`;
count--;
}
// testTimer 역시 변수에 담겼을 뿐인데, 실행이 된다. 혼란스럽군요...
let testTimer = 0;
testTimer = setInterval(function () {
console.log('이거 실행 됩니다.')
}, 1000);
</script>
</html>
답변 1
1
setInterval(...) 이렇게 함수를 호출하셨으니 실행되죠. 함수는 호출되는 순간 실행됩니다.
변수 timer는 interval의 아이디일 뿐이지 함수가 아닙니다. timer() 이렇게 못 합니다.
setInterval이 setTimeout보다 1초 늦게 실행되는 게 아닙니다. 사용 방법을 잘못 아신 것일 뿐입니다.
이미 화면에 5초라고 떠있는데 count가 5부터 시작하니 5초 5초 4초 3초 2초 1초 이렇게 6초가 소요되는 겁니다.
자바스크립트 입문 강의 재생 안됨
0
98
2
쿵쿵따 조건문 질문입니다.
0
85
2
렛츠가릿 자바스트립트와 공유가 되나요
0
88
1
수강을 하기 전 공부순서에 관한 질문이 있습니다.
1
112
2
안녕하세요
0
111
2
1~45 필터링하는 코드에서 find대신 some써주는게 나을거같습니다.
1
82
2
고차 함수 작성법과 수업 진도 관련한 질문
0
96
3
break와 continue 9:55 내 continue 구문 질문
0
161
2
옵셔널 체이닝 적당한 깊이는 어느 정도인가요?
0
127
2
로또 추첨기 중 입력값을 검사할 때
0
151
2
2-14.else,else if,switch 관련 질문입니다.
0
119
2
가위바위보 이미지(rsp.png)가 안보여요
0
274
3
Math.random() 에 9을 곱하는 이유
0
183
4
클로저 관련해서 질문있습니다.
1
196
2
유튜브 댓글 보고 왔습니다!- 퀴즈 중복된 숫자 검사 for 문
0
249
1
event.target.textContent관련 질문
0
284
2
객체 참조 관련 질문
0
186
1
-2+ -2 = -4 음수 더하기 음수 - 셀프체크 계산기
0
496
1
별찍기 마름모 문제입니다.
0
361
2
숙제 질문
0
228
1
5강 async/await으로 가독성 높이기에서
0
240
1
야구게임 관련 질문입니다
0
192
1
쿵쿵따, 계산기에서 변수 선언
0
184
1
지뢰 힌트 사라짐(대괄호)
0
172
1