[9주차 스터디]41장-타이머

타이머

호출 스케줄링

• 함수를 명시적으로 호출하지 않고 일정 시간이 경과된 이후에 호출을 예약하는 것을 호출 스케줄링 이라 함
• 자바스크립트에서 타이머 함수를 제공
  • 타이머 생성 함수 : setTimeout, setInterval
  • 타이머 제거 함수 : clearTimeout, clearInterval
• 타이머 함수는 ECMAScript 사양에 정의된 빌트인 함수가 아니다.
• Node.js 환경에서 전역 객체의 메서드 즉, 호스트 객체
• 타이머 함수를 사용해 생성한 타이머가 만료되면 콜백 함수가 호출되는 동작 방식
• 자바스크립트 엔진은 싱글 스레드(single thread)로 동작하기 때문에 타이머 함수 setTimeout, setInterval은 비동기 처리 방식으로 동작 한다.

타이머 함수

setTimeout/ clearTimeout

• setTimeout 함수는 첫번째 인자로 콜백 함수, 두번째 인자로 시간, 전달해야 할 인수가 존재하는 경우 세번 째 인자로 전달하여 사용
• 전달 받은 시간으로 단 한 번 동작하는 타이머를 생성하고 타이머가 만료되면 콜백 함수 호출(한번 실행)

// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
setTimeout(() => console.log('Hi!'), 1000);
 
// 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다.
// 이때 콜백 함수에 'Lee'가 인수로 전달된다.
setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee');
 
// 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다.
setTimeout(() => console.log('Hello!'));

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

const timerId = setTimeout(() => console.log('excute call back'), 1000);
// clearTimeout으로 취소하면 setTimeout의 콜백 함수가 실행되지 않는다.
clearTimeout(timerId);

setInterval / clearInterval

• setInterval 함수에 전달할 인수는 setTimeout과 동일합니다.
• 첫 번째 인수 콜백 함수, 두번째 인수 시간, 전달할 인자가 있다면 세번째 인수로 전달
• setInterval함수는 전달 받은 시간으로 반복 동작하는 타이머를 생성합니다.
• 즉, 타이머가 만료될 때마다 전달 받은 콜백 함수가 반복적으로 실행 됨
• 마찬가지로 고유한 타이머 id를 반환하며 clearInterval로 취소 가능

let count = 1;
 
// 1초(1000ms) 후 타이머가 만료될 때마다 콜백 함수가 호출된다.
// setInterval 함수는 생성된 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
const timeoutId = setInterval(() => {
  console.log(count); // 1 2 3 4 5
  // count가 5이면 setInterval 함수가 반환한 타이머 id를 clearInterval 함수의
  // 인수로 전달하여 타이머를 취소한다. 타이머가 취소되면 setInterval 함수의 콜백 함수가
  // 실행되지 않는다.
  if (count++ === 5) clearInterval(timeoutId);
}, 1000);

디바운스와 스로틀

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

디바운스 (debounce)

• 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출 되도록 한다.

  즉, 디바우스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화 해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 한다.

• 구현 예시

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

• resize 이벤트 처리, 입력 값으로 ajax 요청, 버튼 주오복 클릭 방지 등 활용 가능

스로틀 (throttle)

• 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.

  즉, 일정 시간단 단위로 이벤트 핸들러가 호출 되도록 호출 주기를 만드는 것

• 구현 예시

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

• scroll 이벤트 처리나, 무한 스크롤 구현에 사용

• 디바운스 나 스로틀을 실제로 구현하기 보다는 Underscore 나 Lodash 에서 제공하는 함수를 사용 함