Throttle과 Debounce의 구현 및 예제

Throttle과 Debounce가 만들어진 이유나 어떠한 동작의 개념을 가지는 지는 모두 아실 것이라 생각합니다.

그래도 한 번 정리해보자면, Throttle은 이벤트를 일정한 주기마다 (설정한 Milliseconds) 발생하도록 하며, Debounce는 마지막으로 함수가 호출된 시점에서 특정 시간이 지난 후 (설정한 Milliseconds)

하나의 이벤트만 발생하도록 하는 기술입니다.

이 두 기술 모두 이벤트 실행에 특정 제약을 걸어 과다한 이벤트 로직 실행을 방지하고, 궁극적으로 웹 페이지 성능의 향상을 위해 나타났다고 볼 수 있습니다.

이번 시간에는, 간단하게 이 둘에 대해 구현을 해보고, 어떻게 사용될 수 있는지 예시를 들어보도록 하겠습니다.

코드는 간단합니다. 자바스크립트의 Date 객체를 이용하여 구현할까도 생각했지만, 간단히 setTimeout을 이용하여 구현해봤습니다.

아래는 throttleAndDebounce.js를 불러와 실제 예시 코드를 작성한 모습입니다.

- Throttle -

- Debounce -

이만 설명 마치겠습니다.

궁금한 점이 있거나 수정해야 할 사항이 있으면 편하게 말씀해주세요.

감사합니다!