[js] setTimeout 정복하기 💥

⏳ setTimeout이 뭐야?

setTimeout은 "조금 있다가 실행해!" 라고 컴퓨터에게 시키는 함수야.

🛠 비유:

👉 알람 시계를 설정한다고 생각해 봐!
👉 "3초 뒤에 알람 울려줘!" 라고 하면, 3초 후에 알람이 울리지?
👉 setTimeout도 똑같아! "몇 초 후에 어떤 일을 해!" 라고 하는 거야.

 

---

🔹 setTimeout 사용법

setTimeout(할_일, 몇_밀리초_후);

• 할_일 → 나중에 실행할 함수 (또는 코드)
• 몇_밀리초_후 → 몇 밀리초(ms) 후에 실행할지 정함.
  • 1000ms = 1초, 2000ms = 2초, 3000ms = 3초

 

---

✅ 예제 1: 3초 후에 "안녕!" 출력하기

setTimeout(function() {
  console.log("안녕! 👋");
}, 3000);

 

📌 설명:

• setTimeout을 사용해서 3초 후에 "안녕! 👋"을 출력하도록 설정했어!
• 3000 → 3초 후에 실행됨!

🔹 실행하면 3초 후에 "안녕! 👋"이 출력돼!

 

---

✅ 예제 2: 버튼을 누르면 2초 후에 메시지 띄우기

<button id="myButton">클릭해봐!</button>
<p id="message"></p>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    setTimeout(function() {
      document.getElementById("message").textContent = "2초 후에 나타난 메시지!";
    }, 2000);
  });
</script>

 

📌 설명:

• 버튼을 누르면 setTimeout이 실행돼.
• 2초 후에 <p> 태그 안에 "2초 후에 나타난 메시지!"가 표시돼!

🔹 클릭 후 2초 기다리면 메시지가 나타남!

 

---

⏹ setTimeout 멈추기 (clearTimeout)

setTimeout을 설정했는데, 중간에 취소하고 싶다면?
👉 clearTimeout을 사용하면 돼!

let timer = setTimeout(function() {
  console.log("이 메시지는 5초 후에 나와야 해!");
}, 5000);

clearTimeout(timer);  // 실행 전에 취소!

 

📌 설명:

• setTimeout을 실행하면 **타이머(timer)**가 만들어짐.
• clearTimeout(timer); → 타이머를 취소해서 메시지가 안 나옴!

 

---

🎯 정리!

✅ setTimeout(할_일, 시간) → 몇 초 후에 할 일을 실행!
✅ 밀리초 단위(ms) → 1000ms = 1초
✅ clearTimeout(타이머) → setTimeout을 멈추기

 

 

 

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