기업 프로젝트의 일환으로 브라우저 크기 조정 및 스크롤 이벤트에 따라 함수가 호출되었으나 비효율적으로 이벤트가 발생할 때마다 콜백 함수가 호출되는 것으로 나타났습니다.
두 이벤트는 연달아 발생할 확률이 높은 이벤트이기 때문에 콜백 함수 연결 시 빈번한 콜백 함수 호출이 발생하여 성능 저하가 발생할 수 있습니다.
나는 이 문제를 해결하는 방법을 연구하고 있었고 스로틀링과 디바운싱의 개념을 발견했습니다.
- Throttling: 초기 이벤트 실행 후 지정된 시간 동안 발생한 이벤트를 묶어서 하나의 콜백 함수만 호출하도록 하는 개념입니다. 크기 조정 및 스크롤과 같은 이벤트에 사용하기에 적합합니다.
- Debouncing: 마지막 이벤트가 발생한 후 지정된 시간 동안 동일한 이벤트가 발생하지 않으면 콜백 함수를 호출하는 개념입니다. 설정된 시간 내에 이벤트가 계속 발생하면 콜백 함수는 무기한 대기합니다. API 통신(버튼 클릭, 입력과 동시에 검색 결과 가져오기)을 사용하는 이벤트와 함께 사용하기에 적합합니다.
