[js] setInterval 정복하기 💥

⏳ setInterval이 뭐야?

setInterval은 "이 일을 계속 반복해!" 라고 컴퓨터에게 시키는 함수야.

🛠 비유:

👉 setTimeout은 "3초 후에 한 번만 실행해!"
👉 setInterval은 "3초마다 계속 실행해!"

즉, setTimeout은 한 번만 실행,
setInterval은 계속 반복해서 실행!

 

---

🔹 setInterval 사용법

setInterval(할_일, 몇_밀리초_마다);

• 할_일 → 반복할 함수 (또는 코드)
• 몇_밀리초_마다 → 몇 밀리초(ms)마다 실행할지 정함.
  • 1000ms = 1초, 2000ms = 2초, 3000ms = 3초

 

---

✅ 예제 1: 2초마다 "안녕!" 출력하기

setInterval(function() {
  console.log("안녕! 👋");
}, 2000);

 

📌 설명:

• 2초마다 "안녕! 👋"을 계속 출력해!
• 무한 반복되니까 clearInterval로 멈추지 않으면 계속 실행됨!

 

---

✅ 예제 2: 1초마다 숫자 증가하기

let count = 1;

let timer = setInterval(function() {
  console.log(`현재 숫자: ${count}`);
  count++;  
}, 1000);

 

📌 설명:

• 1초마다 count 값을 1씩 증가시켜서 출력해!
• count++ → 숫자를 하나씩 늘림.

 

---

⏹ setInterval 멈추기 (clearInterval)

setInterval을 중간에 멈추고 싶다면?
👉 clearInterval을 사용하면 돼!

let count = 1;
let timer = setInterval(function() {
  console.log(`현재 숫자: ${count}`);
  count++;

  if (count > 5) {
    clearInterval(timer);  // 5가 되면 멈추기!
  }
}, 1000);

 

📌 설명:

• 1초마다 숫자를 증가시키지만, 5가 되면 멈춤!
• clearInterval(timer); → setInterval을 멈춤!

 

---

✅ 예제 3: 시계 만들기 (현재 시간 표시)

function showTime() {
  let now = new Date();
  console.log(`현재 시간: ${now.toLocaleTimeString()}`);
}

setInterval(showTime, 1000);  // 1초마다 현재 시간 출력!

 

📌 설명:

• new Date() → 현재 시간 가져오기!
• toLocaleTimeString() → "시:분:초" 형식으로 출력!
• setInterval(showTime, 1000); → 1초마다 현재 시간을 출력!

 

---

🎯 정리!

✅ setInterval(할_일, 시간) → 계속 반복해서 실행!
✅ 밀리초 단위(ms) → 1000ms = 1초
✅ clearInterval(타이머) → setInterval을 멈추기

 

* 해당 본문 내용은 gpt에 질문한 내용입니다.