반응형
자바스크립트의 setInterval() 함수에 대해 설명합니다.
📌 setInterval() 이란?
- 특정 시간마다 반복적으로 함수를 실행합니다.
- 멈추려면 반드시 clearInterval() 을 사용해야 합니다.
📌 문법
setInterval(실행할_함수, 지연시간(ms), [추가인자...]);- 실행할_함수: 일정 주기마다 실행할 함수
- 지연시간(ms): 반복 실행 간격 (1000ms = 1초)
- 추가인자: 함수에 전달할 인자 (옵션)
📌 기본 예제
let count = 0;
let timerId = setInterval(() => {
count++;
console.log("⏰ " + count + "초 경과");
if (count === 5) {
clearInterval(timerId); // 5초 뒤 멈춤
console.log("타이머 종료");
}
}, 1000);실행 흐름
- 1초마다 "⏰ n초 경과" 출력
- 5번 실행 후 clearInterval로 멈춤
출력 예시:
⏰ 1초 경과
⏰ 2초 경과
⏰ 3초 경과
⏰ 4초 경과
⏰ 5초 경과
타이머 종료📌 HTML 예제: 시작/정지 버튼
아래 예제는 버튼으로 시계를 시작/정지하는 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>setInterval 예제</title>
</head>
<body>
<h2>시계</h2>
<p id="clock">--:--:--</p>
<button onclick="startClock()">시작</button>
<button onclick="stopClock()">정지</button>
<script>
let clockId = null;
function startClock() {
if (clockId) return; // 중복 방지
clockId = setInterval(() => {
let now = new Date();
document.getElementById("clock").innerText =
now.toLocaleTimeString();
}, 1000);
}
function stopClock() {
clearInterval(clockId);
clockId = null;
}
</script>
</body>
</html>👉 "시작" 버튼을 누르면 1초마다 시간이 갱신되고,
👉 "정지" 버튼을 누르면 멈춥니다.
💡 정리
- setTimeout() → 일정 시간 후 한 번만 실행
- setInterval() → 일정 시간마다 반복 실행
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: 배열(Array) 정리 (0) | 2025.08.23 |
|---|---|
| 자바스크립트: setTimeout() 함수, 지정된 시간 후 실행 (0) | 2025.08.21 |
| 자바스크립트: onload 이벤트, 웹페이지나 특정 요소가 로드된 후 발생 (0) | 2025.08.20 |
| 자바스크립트: onchange 이벤트, 값이 변경될 때 발생 (0) | 2025.08.20 |
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |