728x90
반응형
728x90
목 차
반응형
1. setInterval과 clearInterval 함수란?
- setInterval과 clearInterval은 JavaScript에서 특정 작업을 일정한 시간 간격으로 반복 실행하거나, 반복 작업을 중단할 때 사용됩니다.
2. setInterval() 함수
2-1. 문법
const intervalId = setInterval(callback, delay, ...args);- callback: 반복적으로 실행할 함수입니다.
- delay: 호출 간격(밀리초 단위)입니다. 1초는 1000밀리초입니다.
- ...args: (선택) callback 함수에 전달할 추가 인수입니다.
- intervalId: 반환값으로, 설정된 인터벌 타이머의 고유 ID입니다. 이를 사용해 반복을 중단할 수 있습니다.
2-2. 사용 예제
setInterval(() => {
console.log('Hello, World!');
}, 1000);- 매 1초마다 "Hello, World!"를 콘솔에 출력합니다
setInterval((name) => {
console.log(`Hello, ${name}!`);
}, 2000, 'Alice');- 매 2초마다 "Hello, Alice!"가 출력됩니다.
3. clearInterval() 함수
3-1. 문법
clearInterval(intervalId);- intervalId: setInterval에서 반환된 고유 ID를 전달하여 해당 인터벌을 중단합니다.
3-2. 사용 예제
const intervalId = setInterval(() => {
console.log('This will stop after 5 seconds');
}, 1000);
setTimeout(() => {
clearInterval(intervalId);
console.log('Interval cleared');
}, 5000);- 매 1초마다 메시지를 출력하다가, 5초 후 clearInterval로 반복 실행이 중단됩니다.
4. 주요 특징
4-1. 비동기 작업
- setInterval은 비동기로 동작하며, 메인 쓰레드의 다른 작업과 병렬로 실행됩니다.
- 타이머가 만료되면 이벤트 루프에 의해 callback 함수가 호출됩니다.
console.log('Before interval');
setInterval(() => {
console.log('Inside interval');
}, 2000);
console.log('After interval');결과 :
Before interval
After interval
Inside interval
5. 활용 예제
5-1. 박스 이동 애니메이션 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('startBtn').addEventListener('click', function() {
let position = 0;
const intervalId = setInterval(() => {
position += 10;
document.getElementById('box').style.left = position + 'px';
if (position >= 300) {
clearInterval(intervalId); // 애니메이션 중단
}
}, 100);
});
});
</script>
</head>
<body>
<button id="startBtn">START</button>
<div id="box" style="background-color:red;width:20px;height:20px;position:absolute;"></div>
</body>
</html>- START 버튼 클릭시 빨간 박스가 이동되는 예제입니다.
- 3초동안 0.1초마다 10px 만큼 우측으로 이동됩니다.
5-2. 타이머 만들기 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script>
document.addEventListener("DOMContentLoaded", function () {
document.getElementById('startBtn').addEventListener('click', function() {
let countdown = 10; // 카운트다운 세팅
const intervalId = setInterval(() => {
document.getElementById("example").innerText = `Time remaining: ${countdown}s`;
countdown--;
if (countdown < 0) {
clearInterval(intervalId);
document.getElementById("example").innerText = `Time is up!`;
}
}, 1000);
});
});
</script>
</head>
<body>
<button id="startBtn">START</button>
<div id="example"></div>
</body>
</html>- START 버튼 클릭시 10초 카운트다운이 실행됩니다.
6. 주의사항
- 메모리 누수 방지: 필요하지 않은 타이머는 반드시 clearInterval로 중단해야 합니다.
- 정확한 타이밍: 고정된 간격이 중요한 경우 setInterval보다는 setTimeout의 재귀 호출 방식을 사용하는 것이 좋습니다.
- 무한 반복 방지: 특정 조건에서만 반복이 필요하다면 조건을 추가해 중단하는 로직을 구현하세요.
관련글
728x90
반응형
'프로그래밍 > [javascript] 자바스크립트' 카테고리의 다른 글
| [JavaScript] 자바스크립트 삼항 연산자 사용법 및 예제 (127) | 2025.01.03 |
|---|---|
| [JavaScript] 자바스크립트 innerText 사용법 (128) | 2024.12.16 |
| [JavaScript] 자바스크립트 textContent 사용법과 주의사항 (90) | 2024.12.15 |
| [JavaScript] 자바스크립트 innerHtml 사용법과 주의사항 (93) | 2024.12.14 |
| [JavaScript] 자바스크립트 name으로 값 가져오기 (109) | 2024.12.11 |