-
질문 & 답변
카테고리
-
세부 분야
프로그래밍 언어
-
해결 여부
해결됨
setTimeout 에 관하여 질문있습니다.
22.05.29 15:39 작성 조회수 322
0
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
조현영
지식공유자2022.05.29
setInterval(...) 이렇게 함수를 호출하셨으니 실행되죠. 함수는 호출되는 순간 실행됩니다.
변수 timer는 interval의 아이디일 뿐이지 함수가 아닙니다. timer() 이렇게 못 합니다.
setInterval이 setTimeout보다 1초 늦게 실행되는 게 아닙니다. 사용 방법을 잘못 아신 것일 뿐입니다.
이미 화면에 5초라고 떠있는데 count가 5부터 시작하니 5초 5초 4초 3초 2초 1초 이렇게 6초가 소요되는 겁니다.
답변 1