대부분의 내용은 모던 자바스크립트 Deep Dive에서 공부한 내용을 정리했습니다.

---

41장 : 타이머

• 자바스크립트는 타이머를 생성할 수 있는 타이머 함수 setTimeout과 setInterval을 제공한다.

• setTimeout / clearTimeout
  setTimeout 함수는 두 번째 인수로 전달받은 시간(ms)으로 단 한 번 동작하는 타이머를 생성한다.
  만약 콜백 함수에 인수가 필요하다면 세 번째 이후의 인수로 전달할 수 있다.

// 1초 후에 콜백 함수가 호출됨
setTimeout(() => console.log('hi'), 1000);

// 1초 후에 콜백 함수에 'Lee'가 인수로 담겨 호출됨
setTimeout(() => console.log(`hi ${name}`), 1000, 'Lee');

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

// 타이머 id를 clearTimeout의 인수로 전달하여 타이머를 취소할 수 있다.
clearTimeout(timerId);

• setInterval / clearInterval
  setInterval 함수는 두 번째 인수로 전달받은 시간(ms)로 반복 동작하는 타이머를 생성한다.
  setInterval 함수에 전달할 인수는 setTimeout 함수와 동일하다.

let count = 1;

const timeoutId = setInterval(() =>
                               console.log(count);	// 1 2 3 4 5
                              // count가 5이면 setInterval 함수가 반환한 타이머 id를 
                              // 인수로 전달하여 타이머를 취소한다.
                               if(count ++ === 5) clearInterval(timeoutId);
}, 1000);

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

• 디바운스
  디바운스란 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.
  즉, 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출된다.

const debounce = (callback, delay) => {
  // debounce 함수는 timerId를 기억하는 클로저를 반환함
  let timerId;
  // delay가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고 새로운 타이머를 재설정함
  return event => {
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(callback, delay, event);
  };
};

• 스로틀
  스로틀이란 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
  즉, 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 일정 시간 단위로 이벤트 핸들러가 호출되도록 호출 주기를 만든다.

const throttle = (callback, delay) => {
  // throttle 함수는 timerId를 기억하는 클로저를 반환함
  let timerId;
  // delay가 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않다가
  // delay가 경과했을 때 이벤트가 발생하면 새로운 타이머를 재설정함
  // delay 간격으로 callback이 호출됨
  return event => {
    if (timerId) return;
    timerId = setTimeout(() => {
      callback(event);
      timerId = null;
    }, delay, event);
  };
};