Debounce_Throttle

Debounce

• 입력을 받으면 특정 동작을 하는데까지 일정한 지연이 걸린다. 지연되는 동안 새로운 입력을 받으면 이전 입력에 대응하는 동작을 하지 않고 또 다시 동일한 지연을 가진다.
• 즉, 새로운 입력이 이전 입력을 취소하는 방법.
• 이번 프로젝트에서는 회원가입 시 이메일 중복을 확인하는데 적용하였다. 이메일란에 입력을 할 때마다 해당 이메일이 중복되었는지 서버에 확인하는데, debounce를 적용함으로써 통신 횟수를 줄일 수 있었다.
• 클로저와 setTimeout을 적절히 사용해서 만들 수 있다.

const debounce = (func, delay) => {
  let timeoutId = null;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func.bind(null,...args), delay);
  }
}

Throttle

• 입력을 받으면 특정 동작을 하는데까지 일정한 지연이 걸린다. 지연되는 동안 새로운 입력을 받아도 무시한다.
• 클로저와 setTimeout을 적절히 사용해서 만들 수 있다.
• 이번 프로젝트에서는 딱히 사용하지 않았다. 라이브 방송 때 채팅을 할 경우 길어진 채팅 내역에 맞춰서 스크롤을 내리는데 쓰려고 했는데, 매번 메세지가 적힐 때마다 갱신하는게 더 좋은 사용자 경험을 줄 것 같아서 적용하지 않았다.

const throttle = (func, delay) => {
  let throttled = false;
  return (...args) => {
    if(!throttled) {
      throttled = true;
      setTimeout(() => {
        func(...args);
        throttled = false;
      }
  },delay);