모던 자바스크립트 41. 타이머

1. 호출 스케일링

• 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용하는데, 이를 호출 스케줄링이라 한다.
• 자바스크립트는 타이머를 생성할 수 있는 함수와 타이머를 제거할 수 있는 함수를 제거하지만 이는 ECMAScript 사양에 정의된 빌트인 함수는 아니고, 호스트 객체*에 해당한다. 
  • 타이머 생성 함수 : setTimout, setInterval
  • 타이머 제거 함수 : clearTimeout, clearInterval

• setTimout과 setInterval 모두 일정 시간이 경과된 이후(=setTimeout과 setInterval이 생성한 타이머가 만료되면) 콜백 함수가 호출된다.
• setTimout 함수가 생성한 타이머는 단 한 번 동작하고, setInterval 함수가 생성한 타이머는 반복 동작한다.
  즉, setTimeout 함수의 콜백 함수는 타이머가 만료되면 단 한 번 호출되고, setInterval 함수의 콜백 함수는 타이머가 만료될 때마다 반복 호출된다.
• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에(싱글 스레드) 타이머 함수 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.

 

* window, document와 같이 실행 '환경'에서 제공되는 객체

---

2. 타이머 함수

1. setTimeout/clearTimeout

• setTimeout 함수는 두 번째 인수로 전달받은 시간(ms)으로 단 한 번 동작하는 타이머를 생성한다.
• 이후 타이머가 만료되면 첫 번째 인수로 전달받은 콜백 함수가 호출된다.
  

  

// 1초 후 타이머가 만료되면 콜백 함수가 호출된다.
const timerId = setTimeout(() => console.log('Hi'), 1000);

// 1초 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout((name) => console.log(`Hi ${name}`), 1000, 'Lee');

• setTimeout 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환하는데, 반환한 타이머 id를 clearTimeout의 인수로 전달하여 타이머로 취소할 수 있다.

// 호출 스케줄링 취소

// setTimeout이 반환하는 고유한 타이머 ID를 timerId라는 변수에 할당.
const timerId = setTimeout(() => console.log('Hello!'), 1000);

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

 

2. setInterval/clearInterval

• setInterval 함수는 두 번째 인수로 전달받은 시간(ms)으로 반복 동작하는 타이머를 생성한다.
• 이후 타이머가 만료될 때마다 첫 번째 인수로 전달받은 콜백 함수가 타이머가 취소될 때까지 반복 호출된다.
  

  

• setIneterval 함수도 setTimeout과 마찬가지로 생성된 타이머를 식별할 수 있는 공한 타이머 id를 반환한다. 이를 clearInterval 함수의 인수로 전달하여 호출 스케줄링을 취소할 수 있다.

let count = 1;

const timeoutId = setInterval(() => {
	console.log(count); // 1, 2, 3, 4, 5

	// count가 5가 되면 타이머 취소(호출 스케줄링 취소)
	if(count++ === 5) clearInterval(timeoutId);
}, 1000);

---

3. 디바운스와 스로틀

• scroll, resize, input, mousemove 같이 짧은 시간 간격으로 연속해서 발생하는 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있다.
• 디바운스와 스로틀은 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지하는 프로그래밍 기법이다.

1. 디바운스

• 디바운스는 이벤트가 발생할 때마다 대기 시간을 초기화해서, 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 마지막 입력 후 일정 시간이 경과하면 이벤트 핸들러가 한 번만 호출되도록 한다.
• 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화하여 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.
• resize 이벤트 처리, input 요소에 입력된 값으로 ajax 요청하는 입력 필드 자동완성 UI 구현, 버튼 중복 클릭 방지 처리 등 복잡한 작업을 실행에서 유용
  

  

 

사용자 입력 발생 → 디바운스 함수 호출 → 지정된 시간 내 입력 지속 시 호출 연기 → 입력 중단 후 대기 시간 지나면 함수 실행.

 

2. 스로틀

• 스로틀은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
• 즉, 이벤트가 발생하면 정해진 시간 동안은 추가적인 호출을 무시하고, 시간이 경과한 후에야 다시 이벤트 핸들러를 호출할 수 있다.
• scroll 이벤트 처리, 무한 스크롤 UI 구현과 같이 고빈도 이벤트에 유용하게 사용된다.

 

이벤트 발생 → 스로틀 함수 호출 → 지정된 간격 내에서 한 번 실행 → 다음 실행 대기.