디바운스 (Debounce) 예제

1. Trailing Edge에서 실행하기

디바운스(Debounce)된 함수는 마지막 이벤트 발생 이후 일정 시간이 지나야 원래 함수가 실행됩니다. Lodash나 es-toolkit을 이용해 디바운싱된 함수는 기본적으로 Trailing Edge에서만 실행됩니다.

예시

직접 해보기

text input에 아무 텍스트나 입력해 input 이벤트가 어떻게 처리되는지 살펴봅시다.

2. Leading Edge에서 실행하기

디바운싱된 함수가 호출되면 즉시 원래 함수가 실행됩니다. 그 후 일정 시간 동안은 다시 호출되지 않습니다.

예시

직접 해보기

text input에 아무 텍스트나 입력해 input 이벤트가 어떻게 처리되는지 살펴봅시다.

3. Leading Edge와 Trailing Edge에서 실행하기

디바운싱된 함수는 처음 호출될 때와 마지막 호출 이후 일정 시간이 지난 뒤, 총 두 번 실행됩니다. 단, 마지막 실행이 발생하려면 디바운스 함수가 일정 시간 내에 최소 두 번 이상 호출되어야 합니다.

예시

직접 해보기

text input에 아무 텍스트나 입력해 input 이벤트가 어떻게 처리되는지 살펴봅시다.

reference: https://css-tricks.com/debouncing-throttling-explained-examples/