41장 타이머

41.1 호출 스케줄링

• 호출 스케줄링 : 일정 시간이 경과된 이후에 호출되도록 함수 호출을 예약하기 위해 타이머 함수를 사용하는 것.
• setTimeout과 setInterval 함수는 ECMAScript 사양에 정의된 빌트인 객체가 아닌, 호스트 객체다.
• 자바스크립트 엔진은 싱글 스레드로 동작하기 때문에 setTimeout과 setInterval은 비동기 처리 방식으로 동작한다.

41.2 타이머 함수

41.2.1 setTimeout / clearTimeout

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

• 매개변수
  • func : 타이머가 만료된 뒤 호출될 콜백 함수
  • delay : 타이어 만료 시간(밀리초(ms) 단위)
  • param1, param2 : 콜백 함수에 전달해야할 인수가 존재하는 경우
• setTimeout 함수는 타이머를 식별할 수 있는 고유한 타이머 id를 반환한다.
• clearTimeout 함수에 타이머 id를 인수로 전달하면 타이머를 취소할 수 있다.

// 1초후 콜백 함수 호출
const timerId = setTimeout(() => console.log('Hi!'), 1000);
// 타이머가 취소되면 setTimeout의 콜백함수가 실행되지 않는다.
clearTimeout(timerId);

41.2.2 setInterval / clearInterval

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

• setInterval 함수는 두 번째 인수로 전달받은 시간으로 반복 동작하는 타이머를 생성한다.
• 타이머가 만료될 때마다 전달받은 콜백함수가 반복 호출된다. 타이머가 취소될 때까지 계속된다.
• setInterval 함수는 고유한 타이머 id를 반환한다.
• clearInterval 함수에 타이머 id를 전달하면 타이머를 취소할 수 있다.

let count = 1;

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

  if(count++ === 5) clearInterval(timeoutId);
}, 1000);

41.3 디바운스와 스로틀

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

41.3.1 디바운스

• 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한번만 호출되도록 한다.
• 예를 들어, 텍스트 입력 필드에서 input 이벤트가 잛은 시간 간격으로 연속해서 발생하는 경우, Ajax 요청과 같은 무거운 처리를 수행한다면 사용자가 입력을 완료했을 때 한번만 Ajax 요청을 전송하는 것이 바람직하다.

<input type="text">
<div class="msg"></div>
<script>
  const $input = document.querySelector('input[type="text"]');
  const $msg = document.querySelector('.msg');

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

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

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

• 사용자가 입력을 완료했는지 여부는 정확히 알 수 없으므로 일정 시간동안 텍스트 입력 필드에 값을 입력하지 않으면 입력이 완료된 것으로 간주한다.
• 실무에서는 Underscore의 debounce 함수나 Lodash의 debounce 함수를 사용하는 것을 권장한다.

41.3.2 스로틀

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

<style>
  .container {width: 300px; height: 300px; background: rebeccapurple; overflow: scroll}
  .content {width: 300px; height: 1000vh;} 
</style>
<div class="container">
  <div class="content"></div>
</div>
<div>
  일반 이벤트 핸들러가 scroll 이벤트를 처리한 횟수 : <span class="normal-count">0</span>
</div>
<div>
  스로틀 이벤트 핸들러가 scroll 이벤트를 처리한 횟수 : <span class="throttle-count">0</span>
</div>
<script>
const $container = document.querySelector('.container');
const $normalCount = document.querySelector('.normal-count');
const $throttleCount = document.querySelector('.throttle-count');

const throttle = (callback, delay) => {
  let timerId;
  // throttle 함수는 timerId를 기억하는 클로저를 반환한다.
  return event => {
    if (timerId) return;
    timerId = setTimeout(() => {
      callback(event);
      timerId = null;
    }, delay, event);
  }
}

let normalCount = 0;
$container.addEventListener('scroll', () => {
  $normalCount.textContent = ++normalCount;
});

let throttleCount = 0;
$container.addEventListener('scroll', throttle(() => {
  $throttleCount.textContent = ++throttleCount;
}, 100))
</script>

• 스트롤은 scroll 이벤트 처리나 무한 스크롤 UI 구현 등에 유용하게 사용된다.
• 실무에서는 Underscore의 throttle 함수나 Lodash의 throttle 함수를 사용하는 것을 권장한다.