[JavaScript] Debounce, Throttle 함수

디바운싱과 쓰로틀링 함수는 유용해서 은근히 자주 쓰이는데 메모용으로 글을 남겨둔다.

Debounce

디바운싱 함수는 여러 번 호출되는 함수 중 마지막 함수만 실행하는 역할을 한다. 디바운싱 함수 실행 후 일정 시간 후에 지정한 함수가 실행되는데 그사이에 디바운싱 함수가 또 실행된다면 일정 시간을 다시 기다리는 동작을 한다.

function debounce(func, delay) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), delay);
  };
}

주로 ajax 요청이 너무 자주 일어나는 걸 막을 때 유용하다.

Throttle

쓰로틀링 함수는 마지막 함수가 실행된 후 일정 시간 동안 다시 호출되지 않도록 하는 역할을 한다. 쓰로틀링 함수 실행 후 지정한 함수가 실행되고 일정 시간 내에 실행되는 쓰로틀링 함수는 무시되는 동작을 한다.

function throttle(func, delay) {
  let wait = false;

  return (...args) => {
    if (wait) {
        return;
    }

    func(...args);
    wait = true;
    setTimeout(() => {
      wait = false;
    }, delay);
  }
}

주로 스크롤이나 창 크기 이벤트처럼 너무 자주 발생하는 걸 막을 때 유용하다.

코드 출처: https://velog.io/@typo/advanced-javascript-functions-to-improve-code-quality