Throttle과 Debounce 개념

Throttle과 Debounce

Throttle과 Debounce는 자주 사용되는 이벤트나 함수들이 실행되는 빈도를 줄여서 성능 상의 유리함을 가져오기 위한 개념이다.

자주 사용되는 간단한 예로는 자동 완성이 있다.

keyboard가 한 자씩 입력될때마다 api로 데이터를 가져오게 되면 요청이 빈번하게 발생되는데, 이를 줄이기 위해 입력이 끝난 후 혹은 입력되는 중간중간 500ms마다 api 요청을 보낸다면, 성능에서 매우 유리해진다.

이때, 입력이 끝난 후 api 요청을 보내고 싶다면 Debounce를, 입력되는 중간중간마다 api 요청을 보내고 싶다면 Throttle을 적용하면 된다!

Throttle

여러번 발생하는 이벤트를 일정 시간 동안 한번만 실행되도록 하는 개념이다.

• 예를들어, 500ms동안 이벤트 실행을 막고 한번만 실행되도록 해 잦은 이벤트 발생을 막아 성능상의 유리함을 가져올 수 있다.
• Debounce와 다른 점은 이벤트 발생 시간 이후에 일정 시간 동안만을 기다리고 이벤트를 실행 후 재차 기다린다는 점이다.

Debounce

여러번 발생하는 이벤트에서 가장 마지막 이벤트만을 실행하도록 하는 개념이다.

• 예를들어, 입력이 끝난 500ms동안 입력이 계속해서 발생한다면 실행시키지 않고 기다리다가 입력이 끝난 500ms동안 입력이 없다면 가장 마지막 이벤트를 실행시킨다.
• Throttle과 다른 점은 마지막 이벤트에서 일정 시간 동안 이벤트가 발생한다면, 또 일정 시간을 기다린다는 점이다.

Throttle vs Debounce

Throttle과 Debounce의 차이점은 이벤트를 언제 발생시킬지의 시점 차이이다.

Debounce는 입력이 끝날때까지 무한적으로 기다리지만, Throttle은 입력이 시작되면, 일정 주기로 계속 실행한다!!

작업물의 성격에 따라 사용방법이 달라질 수 있는데,

대표적인 예로 자동완성을 만들 경우, 일정 주기로 자동으로 완성되는 리스트를 보여주는 것에는
사용자 측면에서 Throttle (검색 되는 경험) 가 유리할 수 있지만,
성능상에서는 Debounce (1번만 호출) 가 훨씬 유리할 수 있다.

lodash를 사용해 Throttle과 Debounce 적용하기

• 설치: npm i lodash
  • typescript와 함께 사용하려면 npm i @types/lodash

예제

import { debounce, throttle } from 'lodash';

const debouncing = debounce((value) => {
  console.log("debouncing", value);
}, 500);

const throttling = throttle((value) => {
  console.log("throttling", value);
}, 500);

const onKeyUp = (e) => {
  debouncing(e.target.value);
  throttling(e.target.value);
};

참고

• Throttle 와 Debounce 개념 정리하기