디바운스(Debounce)와 스로틀(Throttle) 알아보기

기술면접을 준비하면서 디바운스와, 스로틀을 알게 되었다.

아직 프로젝트에 직접 적용해보지 않았지만 미리 어떤 건지 익혀두기 위해 정리해두려 한다.

 

 

디바운스, 스로틀은?

 

- DOM 이벤트를 기반으로 실행하는 자바스크립트를 성능상의 이유로 JS의 양적인 측면, 즉 이벤트를 제어하는 방법이다.

 

 

디바운스와 스로틀을 비교해보자면,

 

디바운스는 아무리 많은 이벤트가 발생해도 무시하고 특정 시간 사이에 어떤 이벤트도 발생하지 않았을 때, 마지막 한 번만 해당 이벤트를 발생시킨다.

스로틀은 일정한 시간이 지날 때마다 해당 이벤트를 발생시키고,

 

아래 링크에서 디바운스와 스로틀의 차이를 확인할 수 있다.

 

The Difference Between Throttling, Debouncing, and Neither

 

이러한 특성을 살펴보았을 때, input에 자동완성 검색창 기능 구현과 같은 경우는 디바운스, 무한 스크롤을 구현할 때는 스로틀(디바운스는 스크롤을 멈춰야 이벤트를 발생시키기 때문)을 사용하는 것이 좋겠다고 생각했다. 지금 내 프로젝트에서도 이 두 가지를 사용해야 할 기능이 몇 가지 생각났는데,

 

1. 자동완성 검색창 기능을 구현한 프로젝트에서 사용자가 input창에 텍스트 입력 시, 매번 fetch요청을 보내는 코드가 있다. 이 기능에 디바운스를 이용해서 일정 시간이 지난 후에만 fetch요청을 보내서 자동완성이 되도록 구현해봐야겠다는 생각을 했다.

 

2. 현재 포트폴리오상에 사용자가 마우스 휠 조절 시 scrollUp 기능이 있다. 이 기능에 스로틀을 사용해서 일정 시간이 지날 때만 해당 이벤트를 발생시킬 수 있도록 해야겠다.