[240610] 41장 타이머

호출 스케줄링

• 특정 코드가 시간이 경과된 이후에 호출되도록 예약하는 프로그래밍 기법
• 타이머 함수는 호스트 객체
• 생성한 타이머가 만료되면 콜백 함수 호출
• setTimeout : 한 번 동작
• setInterval : 반복 동작
• 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖기 때문에 동시에 실행 X , → 싱글 스레드로 동작
• 타이머 함수는 비동기 처리 방식으로 동작함

💡 빌드인 객체 ( Built-in Objects ) vs 호스트 객체 ( Host Objects )

빌트인 객체는 ECMAScript 사양에 정의된 객체, JS 자체에서 제공하는 객체이며 자바스크립트 코드 실행 전에 이미 정의되어 있다.

호스트 객체는 자바스크립트 환경을 제공하는 호스트(웹 브라우저, Node.js) 에서 추가로 제공하는 객체, 자바스크립트 자체에는 정의되어 있지 않지만 자바스크립트를 실행하는 환경에서 특정 기능을 제공하기 위해 존재

타이머 함수

1. setTimeout / clearTimeout

• 두 번째 인수로 전달받은 시간으로 단 한 번 동작하는 타이머 생성
• 매개변수: func, delay, param1, param2 .. .
• delay
  • ms 단위
  • 기본 값 0 지정 (4ms 이하인 경우, 최소 지연 시간 4ms 가 지정)
  • 타이머가 만료되면 콜백 함수가 즉시 호출되는 것이 보장 X
• param1 , param2 …
  • 콜백 함수에 전달해야 할 인수 전달

// 고유 id 반환
// 브라우저 = 숫자 , node = 객체
const timerId = setTimeout(name => console.log('Hi! ${name}.', 1000, 'Lee');
clearTimeout(timerId);

2. setInterval / clearInterval

• 두 번째 인수로 전달받은 시간을 반복 동작하는 타이머 생성

let count = 1;
const timeoutId = setInterval(() => {
  console.log(count); // 1 2 3 4 5
  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

디바운스와 스로틀

• 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러 호출을 방지하는 프로그래밍 기법
• scroll, resize, input, mousemove 같은 이벤트는 짧은 시간 간격으로 연속해서 발생
• 일반적인 이벤트 핸들러와 디바운스,스로틀된 이벤트 핸들러의 호출 빈도 차이 확인했음

1. 디바운스

• 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 함
• 영어 뜻 : 덜컹거림을 줄이다, 충격을 흡수하다
• 실무에서는 Underscore의 debounce 함수나, Lodash의 debounce 함수 사용 권장

const debounce = (callback, delay) => {
  let timerId;

  // debounce 함수는 timerId를 기억하는 클로저를 반환
  return (...args) => {
    // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머 취소하고 새로운 타이머 재설정
    // 따라서 delay보다 짧은 간격으로 이벤트 발생하면 callback 호출 X
    if (timerId) clearTimeout(timerId);
    timerId = setTimerout(callback, delay, ...args);
  };
};

$input.oninput = debounce((e) => {
  $msg.textContent = e.target.value;
}, 300);

사용사례

• 사용자 입력이 완료된 후에만 검색 요청을 보내고 싶은 경우
• 윈도우 리자이즈 이벤트에서 리사이즈가 끝난 후에 레이아웃을 조정하고 싶은 경우

2. 스토틀

• 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대한 한 번만 호출되도록 함
• 영어 뜻 : 조절하다, 속도를 제한하다.
• 실무에서는 Underscore의 throttle 함수나, Lodash의 throttle 함수 사용 권장

const throttle = (callback, delay) => {
  let timerId;
  return (...args) => {
    if (timerId) return;
    timerId = setTimeout(() => {
      callback(...args);
      timerId = null;
    }, delay);
  };
};