[JavaScript]디바운싱과 쓰로틀링이란?

 

 

디바운싱과 쓰로틀링은 웹에서 발생하는 이벤트를 제어하는 프로그래밍 기법입니다.

 

 

 

 

디바운싱(Debouncing)

연속으로 호출되는 함수들 중에 마지막 호출되는 함수만 실행되도록 하는 것

 

예시)

엔터를 누르지 않아도 검색 결과가 나오는 검색창을 구현한다고하면

본인이 검색하려는 검색어를 다 입력한 후에 검색 결과가 나오는 것이 일반적일 것입니다.

그렇다면 검색어를 입력하려고 타자를 칠 때마다 타이머를 설정하여,  예를들면 2초 동안 입력이 없으면 입력이 끝난 것으로 간주하여 검색 api를 요청하는 방식으로 구현할 수 있습니다

 

 

쓰로틀링(Throttling)

마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것

 

 

쓰로틀링은 실행 횟수에 제한을 걸기 때문에 대개 성능 문제를 이유로 사용합니다.

 

 

예시)

스크롤을 사용하면 올리거나 내릴 때 scroll 이벤트가 많이 발생할 수 있습니다.
scroll 이벤트가 발생할 경우 복잡한 작업을 하도록 설정한다면 실행횟수가 많기 때문에 성능이 저하 될 우려가 있습니다.
그럴경우 쓰로틀링을 걸어서 몇 초에 한 번씩 실행되도록 제한을 두면 성능 저하의 우려를 상당 부분 덜어낼 수 있습니다.