JavaScript 디지털시계 — setInterval·setTimeout 완전 정리

 

 

Web Development · JavaScript

JavaScript 디지털시계

setInterval, clearInterval, setTimeout, clearTimeout으로 시계 갱신 흐름을 정리합니다.

시작 오늘 분석할 코드

원본 예제는 div 안에 현재 시간을 표시하고, 타이머 API로 1초마다 화면을 갱신합니다. 클릭으로 멈추고 다시 시작하는 상태 관리까지 함께 들어 있습니다.

let timerID = null; function startClock() { let clock = document.getElementById("clock"); timeout(clock); timerID = setInterval("timeout(clock)", 1000); } function timeout(obj) { let current = new Date(); obj.innerHTML = current.toLocaleTimeString(); } function controlClock() { if (timerID == null) { timerID = setInterval("timeout(clock)", 1000); document.getElementById("clock").style.color = "black"; } else { clearInterval(timerID); timerID = null; document.getElementById("clock").style.color = "lightgray"; } } // setTimeout 방식 function timeout(obj) { let current = new Date(); obj.innerHTML = current.toLocaleTimeString(); setTimeout("timeout(clock)", 1000); }

setInterval정해진 간격마다 함수를 반복 실행합니다.

clearIntervalsetInterval 반복을 중지합니다.

setTimeout정해진 시간 뒤 함수를 한 번 실행합니다.

clearTimeout예약된 timeout 실행을 취소합니다.

timerID타이머를 식별하고 멈추기 위해 저장하는 값입니다.

Date현재 날짜와 시간을 다루는 객체입니다.

---

1 타이머 API의 큰 그림

브라우저는 일정 시간이 지난 뒤 함수를 실행하거나, 일정 간격마다 함수를 반복 실행하는 타이머 API를 제공합니다. 이 예제는 디지털 시계를 통해 두 방식을 비교합니다.

시간 확인

→

Date 생성

→

화면 갱신

API	동작	중지
setInterval	정해진 간격마다 반복 실행	clearInterval
setTimeout	정해진 시간 뒤 한 번 실행	clearTimeout
Date	현재 날짜와 시간 생성	해당 없음
toLocaleTimeString	현재 시간을 지역 형식 문자열로 변환	해당 없음

---

2 setInterval 방식

setInterval("timeout(clock)", 1000)은 1000ms마다 timeout 함수를 다시 호출합니다. 즉 한 번 등록하면 clearInterval을 호출할 때까지 계속 반복됩니다.

1

onload 실행페이지가 열리면 startClock이 호출됩니다.

2

즉시 한 번 출력timeout(clock)을 먼저 호출해 빈 시간을 줄입니다.

3

반복 등록setInterval로 1초마다 시간을 갱신합니다.

4

ID 저장timerID에 저장해야 나중에 멈출 수 있습니다.

---

3 clearInterval과 timerID

반복 타이머를 멈추려면 setInterval이 반환한 ID가 필요합니다. 원본 예제는 전역 변수 timerID에 그 값을 저장합니다.

timerID == null

타이머가 멈춘 상태이므로 새 interval을 등록합니다.

timerID != null

타이머가 실행 중이므로 clearInterval로 멈춥니다.

ID를 저장하지 않으면 어떤 반복 타이머를 멈춰야 하는지 알 수 없습니다.

---

 

반응형

 

4 클릭으로 시계 멈추기

원본 setInterval 예제는 div를 클릭하면 시계를 멈추고 다시 클릭하면 재시작합니다. 색상도 함께 바꿔서 상태를 눈으로 확인하게 합니다.

상태	timerID	화면 색
실행 중	숫자 ID	black
멈춤	null	lightgray
다시 실행	새 ID	black
초기 로드	새 ID	기본 색

---

5 setTimeout 방식

setTimeout은 기본적으로 한 번만 실행됩니다. 원본 setTimeout 예제는 timeout 함수 끝에서 다시 setTimeout을 호출해 반복처럼 동작하게 만듭니다.

timeout 실행

→

시간 출력

→

다음 timeout 예약

이 방식은 함수가 끝날 때 다음 호출을 예약하므로, 반복 간격을 제어하기 쉽지만 중지 ID 관리가 없으면 멈추기 어렵습니다.

---

6 setInterval과 setTimeout 비교

구분	setInterval	setTimeout 반복
반복 등록	한 번 등록하면 계속 반복	매번 다음 실행을 예약
중지	clearInterval(ID)	clearTimeout(ID)
흐름	간단한 주기 작업에 적합	조건부 반복에 적합
시계 예제	직관적	재귀 예약 구조 이해 필요
주의점	중복 등록 조심	ID 저장 누락 조심

---

7 문자열 호출 방식의 주의점

원본 코드는 setInterval("timeout(clock)", 1000)처럼 문자열을 전달합니다. 학습 예제에서는 볼 수 있지만, 실제 코드에서는 함수 참조를 넘기는 방식이 더 안전합니다.

문자열 방식

브라우저가 문자열을 코드처럼 해석합니다. 오타와 보안 면에서 좋지 않습니다.

함수 방식

setInterval(() => timeout(clock), 1000)처럼 함수로 전달합니다.

timerID = setInterval(() => timeout(clock), 1000);

---

8 Date와 시간 출력

new Date()는 현재 시각을 담은 객체를 만들고, toLocaleTimeString()은 사용자의 지역 설정에 맞는 시간 문자열을 반환합니다.

코드	결과	설명
new Date()	Date 객체	현재 날짜와 시간
toLocaleTimeString()	오후 3:21:05	지역 형식 시간
innerHTML	화면 출력	div 안의 내용을 바꿈
1000	1초	밀리초 단위

---

9 자주 하는 실수

실수	증상	해결
timerID 저장 안 함	타이머를 멈출 수 없습니다.	반환값을 변수에 저장합니다.
setInterval 중복 등록	시계가 여러 번 갱신됩니다.	실행 중인지 timerID로 확인합니다.
clearTimeout과 clearInterval 혼동	의도한 타이머가 멈추지 않습니다.	등록 API에 맞는 clear 함수를 씁니다.
문자열 호출 남용	오타 추적이 어렵습니다.	함수 참조나 화살표 함수를 사용합니다.
clock 변수를 전역처럼 사용	환경에 따라 오류가 납니다.	요소를 명확히 변수로 전달합니다.

---

10 복습 체크리스트

체크	통과 기준
setInterval	반복 타이머를 등록한다고 설명합니다.
clearInterval	저장한 ID로 반복을 멈춥니다.
setTimeout	한 번 실행 예약임을 설명합니다.
clearTimeout	예약된 한 번 실행을 취소합니다.
Date	현재 시간을 얻는 흐름을 이해합니다.
상태 관리	timerID와 null로 실행 상태를 구분합니다.

---

11 직접 바꿔보기

A

간격 변경1000을 500으로 바꿔 더 자주 갱신되게 합니다.

B

색상 변경멈춤 상태 색을 다른 색으로 바꿔봅니다.

C

함수 방식 적용문자열 호출을 화살표 함수로 바꿉니다.

D

초 표시 제거시간 문자열 포맷 옵션을 찾아 적용해 봅니다.

테스트	확인 내용
페이지 로드	시계가 즉시 표시되는지 확인합니다.
1초 대기	시간이 갱신되는지 확인합니다.
시계 클릭	색이 흐려지고 갱신이 멈추는지 봅니다.
다시 클릭	색이 돌아오고 갱신이 재개되는지 봅니다.
콘솔 오류	clock 변수가 undefined로 나오지 않는지 확인합니다.

---

12 디버깅 포인트

타이머 예제는 화면이 계속 바뀌기 때문에 문제가 생겼을 때 원인을 놓치기 쉽습니다. 실행 횟수, 타이머 ID, 요소 참조를 나누어 확인하면 안정적으로 찾을 수 있습니다.

확인	콘솔 예시	의미
timerID 값	console.log(timerID)	null이면 멈춤, 값이 있으면 실행 중입니다.
clock 요소	console.log(clock)	div 요소를 제대로 찾았는지 확인합니다.
현재 시간	console.log(new Date())	Date 객체가 정상 생성되는지 봅니다.
실행 횟수	console.count("tick")	중복 interval 등록 여부를 확인합니다.
색상 상태	console.log(clock.style.color)	멈춤/실행 상태 표시가 맞는지 봅니다.
함수 호출	console.log("timeout")	예약된 함수가 실제 실행되는지 확인합니다.

1

요소 확인getElementById가 null을 반환하지 않는지 먼저 봅니다.

2

ID 확인setInterval 반환값이 timerID에 저장되는지 봅니다.

3

중복 확인클릭할 때 interval이 여러 개 생기지 않는지 확인합니다.

4

중지 확인clearInterval 후 timerID를 null로 돌리는지 봅니다.

---

13 실무 적용 메모

시계처럼 계속 갱신되는 UI는 화면에 보이지 않을 때도 계속 실행될 수 있습니다. 실제 서비스에서는 필요할 때만 타이머를 켜고, 화면을 떠날 때 정리하는 습관이 중요합니다.

상황	권장 처리	이유
페이지 이동	타이머 정리	불필요한 반복 실행을 막습니다.
모달 닫힘	관련 timer clear	보이지 않는 UI 갱신을 줄입니다.
탭 비활성	갱신 간격 조절	자원 사용을 줄일 수 있습니다.
여러 시계	ID를 각각 저장	어떤 타이머를 멈출지 구분합니다.
애니메이션	requestAnimationFrame 검토	화면 프레임과 맞출 수 있습니다.
서버 동기화	주기적 요청 제한	불필요한 네트워크 요청을 줄입니다.

---

핵심 한 줄 요약

setInterval반복 실행을 등록하고 ID를 저장해 clearInterval로 멈춥니다.

setTimeout한 번 실행 예약이며, 함수 안에서 다시 예약하면 반복처럼 만들 수 있습니다.

timerID타이머 실행 상태를 구분하는 핵심 변수입니다.

Tags

#JavaScript#setInterval#clearInterval#setTimeout#clearTimeout#Date#timerID#clock#BOM#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, setInterval, clearInterval, setTimeout, clearTimeout, Date, timerID, clock, BOM, 티스토리