디바운스(Debounce)와 스로틀(Throttle)이란? [Rx Programming]
디바운스와 스로틀은 모두 리액티브 프로그래밍에서 이벤트를 제한하는 방법입니다.
이 두 방법은 모두 특정 시간을 분기로 삼아 이벤트를 제한해 준다는 공통점이 있습니다.
이벤트 처리할 때 제한을 해주는 이유
스포티파이를 본다면 노래를 검색할 때 검색하기 버튼을 클릭하지 않고,
그저 키워드를 입력하면 아래 페이지가 변하는 것을 알 수 있다.
이는 사용자의 행동을 감지하여 검색을 한 후, 그 결과를 반영하는 것인데
만악 당신이 클라이언트 개발자라고 하였을 때
위와 같이 검색버튼을 클릭하지 않더라도 검색이 되도록 구현하고 싶다면 어떻게 해야 하는가?
이벤트 처리
그저 사용자가 검색하는 필드를 확인한 후 값이 변할 때마다 서버로 요청을 보내면 됩니다.
하지만
이 부분에는 큰 문제가 발생한 다는 점을 알 수 있습니다.
위의 사진을 예로 든다면
'첫사랑'이라는 키워드를 입력하였는데
이를 실제로 '첫사랑'이라는 키워드가 입력될 때까지
-> ㅊ
-> 처
-> 첫
-> 첫ㅅ
-> 첫사
-> 첫살
-> 첫사라
-> 첫사랑
순서로 7번을 더 검색해야 한다는 것을 알 수 있습니다.
이는 단순히 3글자의 짧은 단어를 검색하였는데도 8번의 검색을 해야 한다는 결과를 초래하였습니다.
만약 글자가 훨씬 길어진다면?
정말 끔찍할 정도의 요청을 보낼 것이고,
이러한 과도한 요청은 서버에 무리를 줄 수 있습니다.
따라서 유저의 편의와 시스템을 모두 지키기 위해 이벤트 처리에 제한을 걸어줘야 합니다.
디바운스(Debounce)
디바운스는 이벤트로부터 특정 시간이 지났을 때 응답합니다.
위의 그림을 본다면 빨간 입력으로부터 일정시간을 기다린 후 아래로 출력되었습니다.
하지만 노란 입력 이후에 특정 시간이 지나가기 전 초록 입력이 들어오며
입력 대기 시간이 초기화되었고, 그 시점으로부터 특정 시간이 지났을 때 출력되었습니다.
입력으로부터 특정 시간 이후 출력 정도로 해석할 수 있습니다.
스로틀(Throttle)
스로틀은 이벤트 발생이 일정 간격으로 일어납니다.
여기서 스로틀은 무엇을 기점으로 분류되는가에 따라서 2가지로 분류됩니다.
- throttleFirst
- throttleLast
throttleFirst
이벤트가 들어온 이후, 일정한 시간 간격이 지난 후에 해당 간격 중 가장 처음에 들어온 이벤트를 발생시킵니다.
이해를 위해 위 그림을 보자면 예시를 위해 일정 시간을 3초로 두겠습니다.
빨간색 이벤트 발생
가장 먼저 들어온 빨간 이벤트를 발생시켰다. 그리고 4초 동안 아무런 이벤트가 들어오지 않았습니다.
노란색 이벤트 발생
일정 시간이 지났기에 노란 이벤트가 발생하였고, 2초가 지난 이후 초록 이벤트가 감지되었고,
일정 시간이 지나지 않았기에 초록 이벤트가 무시되고 2초가 지났습니다.
하늘색 이벤트 발생
일정 시간이 지났기에 하늘색 이벤트가 발생하였고, 2초가 지난 이후 파란 이벤트가 감지되었고,
일정 시간이 지나지 않았기에 파란 이벤트가 무시되고 2초가 지났습니다.
연보라 이벤트 발생
일정 시간이 지났기에 연보라 이벤트가 발생하였습니다.
이를 해석하면 처음에 이벤트가 발생한 이후,
특정 기간 동안 감지되는 동작들이 무시되는 느낌으로 이해할 수 있습니다.
throttleLast
새로운 이벤트가 들어온 후, 일정한 시간 간격이 지난 후에 해당 간격 중 가장 마지막으로 들어온 이벤트를 발생시킵니다.
주황 이벤트 발생
빨강 이벤트가 감지되었고, 그로부터 특정이 지나기 전 주황 이벤트가 감지되어,
가장 마지막 이벤트인 주황 이벤트가 발생하였습니다.
throttleLast는 간단하게
새로운 이벤트를 기점으로 특정 시간 동안 가장 마지막에 들어온 입력이 출력되는 것입니다.
Debounce, Throttle 차이
디바운스와 스로틀은 모두 제한을 거는 방법이지만,
디바운스는 이벤트 이후 특정한 시간이 보내야 입력이 되고,
스로틀은 이벤트 이후 일정 시간 동안 입력이 제한되기 때문에
가장 큰 차이점은 스로틀은 일정 시간 동안 적어도 요청을 보장하지만,
디바운스는 특정 시간이 지나기 전에 계속 요청이 들어온다면 시간이 이벤트마다 갱신되기에,
이벤트가 출력되지 않고, 계속 무시되는 것입니다.