Javascript
디바운스(Debounce)
*히아*
2023. 8. 29. 17:45
실무를 하다가 건물을 클릭했을 때 webGL에서 카메라가 해당 건물로 줌인되는데 줌인이 끝나면 그 건물에 대한 정보가 담긴 모달창이 뜬다. 카메라가 움직이는 몇 초 사이에 건물을 여러번 클릭하면 해당 함수가 중복적으로 일어나 모달창이 꺼졌다 켜졌다하는 문제가 발생했다.
여기서 디바운스 라는 기술을 적용해 보기로 했다.
debounce의 일반적인 뜻은 전자 회로 스위치의 신호 이상 상태에서 왔다. 전자 회로 스위치를 눌렀다가 떼는 과정에서 전압이 불규칙적으로 들어거 전류의 흐름이 비정상적으로 일어나는 현상을 바운싱이라고 한다. 이런 비정상적인 흐름을 정상적으로 해주는 작업이 "디바운싱"이다.
해당 개념을 웹으로 가져와 예를 들어보면 우리는 어떠한 input창을 칠 때 혹은 버튼을 누를 때 의도치 않게 서버로 부터 글자를 칠 때마다 api 요청을 하게된다. 이것은 서버의 부담을 줄 수 있으며 원치 않는 결과를 나타낼 수 있다. 디바운스는 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하여 제약을 건다.
디바운스를 적용하여 시간을 걸어주었고 카메라가 줌인되고 있는 과정에서 유저가 여러번 클릭해도 해당 시간 내에서 연속된 클릭은 한 번만 뜨게 만들어 주어 버그를 개선해주었다~!