타이머

이 글은 '이웅모'님의 '모던 자바스크립트 Deep Dive' 책을 통해 공부한 내용을 정리한 글입니다. 저작권 보호를 위해 책의 내용은 요약되었습니다.

호출 스케줄링

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출하도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 이를 호출 스케줄링이라 한다.

타이머 함수

setTimeout/clearTimeout

• 기능 : 전달받은 시간 후에 단 한 번 동작하는 타이머를 생성
• 반환 : 고유한 타이머 id (브라우저 : 0이 아닌 숫자, Node : 객체)
• 인수
  • 첫 번째 : 호출할 콜백 함수
  • 두 번째 : 타이머 만료 시간 (Delay) (ms)
  • 세 번째 이후 : 콜백 함수에 전달할 인수
• clearTimeout 으로 타이머 취소

const timer = setTimeout((name)=>console.log(name), 1000, 'kim'); // 1초 후 -> 'kim'
console.log(timer); // 5

clearTimeout(timer); // timer 타이머 취소

setInterval/clearInterval

• 기능 : 전달받은 시간으로 반복 동작하는 타이머를 생성
• 반환 : 고유한 타이머 id (브라우저 : 0이 아닌 숫자, Node : 객체)
• 인수
  • 첫 번째 : 호출할 콜백 함수
  • 두 번째 : 타이머 반복 실행 시간 (Delay) (ms)
  • 세 번째 이후 : 콜백 함수에 전달할 인수
• clearInterval 으로 타이머 취소

let i = 0;
const timer = setInterval(()=>{
  console.log(i) // 3초마다 -> 0 1 2 3
  i++;
  
  if(i > 3) clearInterval(timer);
}, 3000);

console.log(timer); // 2