# Throttle과 Debounce
###### tags: `tech sharing`

이벤트의 실행 빈도를 줄여서 성능상의 유리함을 가져오는 방법이다. 혹은 일정시간 내에 여러번 실행되는 이벤트를 조절하는 방법이다.

예를들어, form의 submit 버튼을 연속해서 여러번 클릭할 경우 잘못하면 api 요청을 여러번 보낼 경우가 있기 때문에 이런 경우 처리를 해주면 좋다.

## Throttle

마지막 함수가 호출된 이후에 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것.

## Debounce

입력 주기가 끝나면 출력하는 것

여러번 발생하는 이벤트에서 가장 마지막 이벤트만을 실행할 수 있다.

### 예

const debounce = (func, ms) => {
  let timer;
  return (...params) => {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => func(...params), ms);
  };
};

export default debounce;

## debounce와 throttle의 차이

throttle은 계속해서 이벤트가 호출될 때 일정 시간 간격으로 정기적인 기능 실행을 보장한다.

하지만 debounce는 아무리 많은 이벤트가 발생해도 모두 무시하고 마지막 이벤트만 실행한다.