[javascript] 타이머(timer) 함수

Timer 함수

• 일정 시간마다 특정 구문을 실행하고자 할 때 사용하는 기능
• 타이머 함수는 모두 전역 객체인 window에 포함되어 있음

---

setTimeout()

• 일정 시간이 지난 후 한 번만 실행

// [문법]
setTimeout(함수, 지연시간(ms), 인자1, 인자2, ...);

// [문법]
setTimeout(() => {
    //  원하는 작업 코드
  }, 지연시간);

인자	설명
함수	지정한 시간이 지난 후 실행할 함수 (콜백 함수)
지연시간(ms)	몇 밀리초(ms) 후에 실행할지 (1000 = 1초)
인자1, 인자2, ...	(선택) 콜백 함수에 전달할 추가 값들

---

clearTimeout()

• setTimeout()이 만든 타이머를 취소하는 함수
• setTimeout()을 실행하면 고유한 ID가 반환되는데, 그 ID를 clearTimeout()에 넘기면 실행되지 않게 막을 수 있음

// [문법]
clearTimeout(타이머ID);

// [문법 - 일반적인 사용 흐름]
const 타이머ID = setTimeout(실행할_함수, 지연시간);
clearTimeout(타이머ID); // 해당 타이머를 실행 전에 취소함

// ⏳ 타이머 설정: 3초 뒤에 실행
const timeoutId = setTimeout(() => {
  console.log("이 메시지는 실행되지 않음");
}, 3000);

// ❌ 타이머 취소
clearTimeout(timeoutId);

/*
1. setTimeout()으로 3초 후 실행 예약
2. 반환된 timeoutId를 기억
3. 그 전에 clearTimeout(timeoutId) 실행
   => 결과적으로 console.log()는 실행되지 않음
*/

---

setInterval()

• 일정한 간격으로 반복 실행

// [문법]
setInterval(함수, 간격시간(ms), 인자1, 인자2, ...);

// [문법]
setInterval(() => {
    //  원하는 작업 코드
  }, 지연시간);

setInterval(() => {
  console.log("2초마다 반복 실행");
}, 2000);

---

clearInterval()

• setInterval()로 설정한 반복 실행을 중단(stop)시키는 함수
• setInterval()로 일정 시간 간격마다 코드를 실행하게 만들었을 때그 반복을 원하는 시점에서 멈추고 싶을 때 사용하는 함수
• setTimeout()을 사용하거나 조건문을 활용하여 claerInterval 수행

clearInterval(인터벌ID);

setTimeout()을 사용한 clearInterval()

const intervalID = setInterval(() => {
  console.log('2초마다 반복');
}, 2000);

setTimeout(()=>{
	clearInterval(intervalID);
	console.log('반복 종료');
},6000)

조건문을 사용한 clearInterval();

let cnt = 0;
const id = setInterval(() => {
  cnt++;
  console.log(cnt); // ⇒ 1,2,3,까지 출력되고 멈춤
  if (cnt >= 3) clearInterval(id);
}, 1000);

---