스로틀 (Throttle) 예제

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

스로틀(Throttle)된 함수는 정해진 시간 간격마다 실행됩니다. Lodash나 es-toolkit을 이용해 스로틀링된 함수는 기본적으로 Leading Edge와 Trailing Edge에서 모두 실행됩니다.

예시

직접 해보기

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

2. Leading Edge에서 실행하기

처음 스로틀링된 함수가 호출되었을 때 즉시 원래 함수가 실행됩니다. 이후 일정 시간 동안은 다시 호출되지 않으며, 마지막 호출 시점 이후에는 실행되지 않습니다.

예시

직접 해보기

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

3. Trailing Edge에서 실행하기

스로틀링된 함수가 여러 번 호출되더라도 즉시 실행되지는 않습니다. 마지막 호출 이후 지정된 시간이 지나면 원래 함수가 한 번 실행됩니다.

예시

직접 해보기

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

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