호출 스케줄링 - setTimeout, setInterval의 사용

호출 스케줄링

함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후 호출되도록 타이머 함수를 사용해 함수 호출을 예약하는 것

타이머 함수

자바스크립트의 타이머 함수

• 생성 함수 : setTimeout, setInterval
• 제거 함수 : clearTimeout, clearInterval

타이머 생성 함수 setTimeout과 setInterval은 모두 일정 시간 경과 이후 콜백 함수가 호출되도록 타이머를 생성함

즉 생성한 타이머가 만료되면 콜백 함수가 호출됨

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가짐 → 두 가지 이상의 테스크를 동시에 실행할 수 없음

즉 자바스크립트 엔진은 싱글 스레드로 동작

이런 이유로 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동작함

---

setTimeout

const timeoutId = setTimeout(func, [, delay, param1, param2, ...]);

• 두 번째 인수로 전달받은 시간(ms, 1/1000초)으로 단 한 번 동작하는 타이머 생성
• 이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수 호출
• 즉 setTimeout 함수의 콜백 함수는 두 번째 인수로 전달받은 시간 이후 “단 한 번” 실행되도록 호출 스케줄링됨
• delay 인수에 대하여
  • 인수 전달을 생략할 경우 기본값 0 지정
  • delay 시간이 설정된 타이머가 만료되면 콜백 함수가 ‘즉시’ 호출되는 것이 보장되지는 않음
  • delay 시간은 태스크 큐에 콜백 함수를 ‘등록하는 시간’을 지연할 뿐
  • delay가 4ms 이하인 경우 최소 지연 시간 4ms가 지정됨
• param1, param2… 에 대하여
  • 호출 스케줄링된 콜백 함수에 전달해야 할 인수가 존재하는 경우 세 번째 이후의 인수로 전달

// 1초 후 콜백함수 호출
setTimeout(() => console.log("1st timeout"), 1000);

// 1초 후 콜백함수 호출될 때 'Lee'가 콜백함수에 인수로 전달
setTimeout((order) => console.log(`${order} timeout`), 1000, "2st");

// 두 번째 인수(delay) 생략하면 기본값 0이 지정
setTimeout(() => console.log("hello"));

---

clearTimeout

// setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id 반환
const timerId = setTimeout(() => console.log("id"), 1000);

// setTimeout 함수가 반환한 id를 clearTimeout 함수의 인수로 전달해 타이머 취소
// 타이머 취소되면 setTimeout 함수의 콜백 함수 실행되지 않음
clearTimeout(timerId);

• setTimeout 함수는 생성된 타이머 식별할 수 있는 고유한 타이머 id 반환
  • id는 브라우저 환경의 경우 숫자, Node.js 환경의 경우 객체
• setTimeout 함수가 반환한 타이머 id를 clearTimeout 함수의 인수로 전달해 타이머 취소 가능
• 즉, clearTimeout 함수는 호출 스케줄링을 취소함

---

setInterval

const timerId = setInterval(func [, delay, param1, param2]);

• 두 번째 인수로 전달받은 시간(ms)으로 반복 동작하는 타이머 생성
• 이후 타이머가 만료될 때마다 첫 번째 인수로 전달받은 콜백함수 반복 호출되도록 호출 스케줄링
  • 타이머가 취소될 때까지 계속
• setInterval 함수 또한 생성된 타이머를 식별할 수 있는 고유한 타이머 id 반환
  • 브라우저 환경 : 숫자 / Node.js 환경 : 객체
• 즉, 반환한 타이머 id를 clearInterval 함수의 인수로 전달해 타이머를 취소할 수 있음

let count = 1;

// 1초 후 타이머 만료될 때마다 콜백 함수 호출
const timeoutId = setInterval(() => {
  console.log(count);

	// count가 5가 되면 
  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

 

(참고 : 자바스크립트 Deep Dive)