Debounce가 뭘까??

Dorr·2021년 8월 30일
0

Debounce 란??

Debounce란 연속적으로 발생하는 이벤트를 그룹화하여 한번에 처리하는 방법입니다. 각각의 이벤트가 발생했을 때 특정 시간내에 동일한 이벤트가 발생하지 않을때까지 처리를 미룹니다. 따라서 가장 마지막 이벤트만이 실질적으로 처리된다고 할 수 있습니다.

위의 그림처럼 매우 짧은 간격으로 발생하는 이벤트의 경우 마지막 이벤트만 처리되게 하는 것이 debounce라 할수 있습니다.

Debounce 적용해보기


위의 gif 를 직접 구현하면서 Debounce에 대해 알아봅시다.

1. 일반적인 이벤트 핸들러


값을 입력하자마자 즉시 출력되는 것을 확인 할 수 있다.

2. debouce 적용된 이벤트 핸들러

참고 자료

Debouncing and Throttling Explained Through Examples
Debounce in JavaScript — Improve Your Application’s Performance

0개의 댓글