쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
먼저 쓰로틀링(throttling)이란 마지막 함수가 호출된 후
일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것이고
디바운싱(debouncing)은 연이어 호출되는 함수들 중
마지막 함수(또는 제일 처음)만 호출하도록 하는 것이다.
디바운싱은 주로 ajax 검색에 자주 쓰이며
쓰로틀링은 스크롤을 올리거나 내리는 등이 이동 시에 보통 사용한다.
요즘 서비스들은 검색어를 창에 치자마자 엔터 없이도 결과가 바로바로 나온다.
그렇게 엔터 없이도 결과를 즉시 보여주려면 항상 input 이벤트에 대기하고 있어야 한다.
문제는 input이벤트가 한 글자 칠 때마다 요청이 실행되어
내가 원하는 단어로 완성하기 전까지 무수히 많은 필요없는 요청이 간다는 것이다.
이 같은 낭비는 유료 API를 사용했을 때 큰 문제가 된다.
만약 구글지도 API같은 것을 사용할 때 이렇게 쿼리를 10번 날리면 어마어마한 손해다.
쿼리 하나가 다 돈이기 때문이다. 따라서 디바운싱은 비용적인 문제와도 관련이 있다.
그래서 이 때 유저의 입력이 다 끝난 후에 요청을 보내도록,
타자를 칠 때마다 타이머를 설정해서 일정 시간동안 입력이 없으면 입력이 끝난 것으로 하고
만약 그 설정 시간 이전에 타자 입력이 발생하면 이전 타이머는 취소하고
새로운 타이머를 다시 설정하도록 구현하면 더는 여러 번 호출되지 않는데
이게 바로 디바운싱이다.
쓰로틀링은 특성 자체가 실행 횟수에 제한을 거는 것으로 보통 성능 문제 때문에 많이 사용한다.
스크롤을 올리거나 내릴 때 scroll 이벤트가 매우 많이 발생하는데
scroll 이벤트가 발생할 때 뭔가 복잡한 작업을 하도록 설정했다면
매우 빈번하게 실행되기 때문에 렉이 엄청 걸릴 것이다. 그럴 때 쓰로틀링을 걸어준다.
몇 초에 한 번, 또는 몇 밀리초에 한 번씩만 실행되게 제한을 두는 것이다.
디바운싱으로 구현했던 ajax 검색을 쓰로틀링으로 대체해도 된다.
물론 쿼리는 조금 더 날리겠지만 예시를 들자면 똑같이 일정 시간 제한을 걸어두고,
타이머가 설정되어 있으면 아무 동작도 하지 않고, 타이머가 없다면 타이머가 설정되게 한다.
타이머는 일정 시간 후에 스스로를 해제하고, ajax 요청을 날리게 하면 된다.
ajax 검색은 디바운싱으로 처리하는 게 더 나아보이지만
중간 중간 검색 결과도 보여주고 싶다면 쓰로틀링도 괜찮은 옵션인 것 같다.
원본 글
제로초 쓰로틀링과 디바운싱
