Debounce, Throttle

디바운스(Debounce), 스로틀(Throttle)

DOM 이벤트를 기반으로 실행하는 JavaScript를 성능을 고려하여 제어하는 방법이다.
마우스를 움직이거나 스크롤, 검색과 같은 상황에서 유저의 연속적인 액션이 이벤트 핸들러를 과하게 호출하여 성능에 문제가 생길 수 있다.
debounce, throttle을 사용하면 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 성능의 저하를 방지할 수 있다.

Debounce

디바운스(debounce)는 짧은 시간 간격으로 연속해서 이벤트가 발생하면 이벤트 핸들러를 호출하지 않다가, 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 한다.
짧은 시간 연속적인 순차적인 호출을 하나의 그룹으로 그룹화하는 개념이다.

이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않고 있다가, 일정시간동안 이벤트가 더 이상 발생하지 않으면 이벤트 핸들러를 호출한다.

예시

1. resize
   반응형 대응을 위해 종종 resize 이벤트를 사용하는데 이벤트 핸들러는 유저가 창 크기를 조절하는 동안에는 실행되어질 필요가 없다. 마지막 크기만 필요하기 때문에 이런 경우 debounce 적용이 가능하다.

2. 검색 자동완성
   네이버처럼 검색을 실행하기 전에 자동완성 결과를 보여주려면 input에 이벤트를 걸며 된다. 하지만 형태소 하나 입력될때마다 API를 호출하게 되기 때문에 이런 경우 debounce를 적용해서 통신의 비용을 아낄 수 있다.

code

<script setup lang="ts">
import { ref } from 'vue'
import AppInput from '../elements/input.vue'
import { useDebounceFn } from '@vueuse/core'

const value = ref('')
const onUpdate = (value: string) => {
  console.log(value)
}

const debounceUpdate = useDebounceFn(onUpdate, 200)
</script>
<template>
  <app-input class="input" v-model="value" @update:model-value="debounceUpdate" />
</template>

위 코드에서는 @vueuse/core의 useDebounceFn을 사용했다. delay를 200ms로 설정하고 검색을 테스트해보면 실제 이벤트 핸들러가 동작하는 횟수가 압도적으로 줄어들었음을 확인할 수 있다.

아래가 디바운스를 적용했을 때의 결과인데 사용자의 입력이 끝난후 딱 한번만 실행된 것을 확인할 수 있다.

Throttle

스로틀링(throttling)은 짧은 시간 간격으로 이벤트가 연속해서 발생하더라도, 일정 시간 간격으로 이벤트 핸들러가 최대 한 번만 호출되도록 한다.
디바운스와 비슷하지만, 디바운스는 마지막에 한 번만 이벤트 핸들러를 호출하는 반면 스로틀링은 짧은 시간 간격으로 발생하는 이벤트들을 그룹화해서 호출 주기를 만들어 일정 시간 단위로 이벤트 핸들러를 호출한다.

위의 그림을 보면 이해하기가 쉬운데 그림에서 위쪽이 디바운스, 아래가 스로틀링이다.
스로틀링은 호출 주기(delay)가 경과하기 이전에 이벤트가 발생하면 아무것도 하지 않는다.
그리고 delay 시간이 경과했을 때 이벤트가 발생하면 이벤트 핸들러를 호출하고 새로운 타이머를 재설정한다.
이벤트가 계속 반복되더라도 정해진 delay 시간 간격으로 이벤트 핸들러가 호출되게 된다.

예시

1. scroll
   스크롤의 경우 스로틀링을 적용하면 비용을 절감할 수 있다.

출처 : https://velog.io/@greencloud/api-와장창-호출하지-않는-법-Feat.-디바운스