디바운싱(Debouncing)이란?
디바운싱은 불필요하게 시간을 소모하는 연산을 줄여 브라우저 성능을 향상시키는 대표적인 최적화 기법입니다. 어떤 기능은 특정 작업을 수행하는 데 비교적 많은 시간이 걸리는데, 대표적인 예로 이커머스 웹사이트의 검색창을 들 수 있습니다.
왜 디바운싱이 필요한가?
사용자가 "Tutorix 스터디 키트"라는 제품을 검색한다고 가정해 보겠습니다. 사용자는 검색창에 제품명을 한 글자씩 입력할 것이고, 글자를 입력할 때마다 브라우저에서 서버로 API 호출이 발생해 필요한 제품 정보를 요청하게 됩니다.
"Tutorix study kit"은 총 17글자이므로, 사용자 한 명이 검색을 완성하기 위해 무려 17번의 API 호출을 하게 됩니다. 만약 수백만 명의 사용자가 동시에 같은 검색을 수행한다면 어떻게 될까요? 수십억 번의 API 호출이 순식간에 발생할 것이고, 이는 곧바로 브라우저 성능 저하로 이어집니다. 바로 이러한 문제를 해결하기 위해 디바운싱이 등장했습니다.
디바운싱은 두 번의 키 입력 사이에 일정한 시간 간격, 예를 들어 2초를 설정합니다. 두 키 입력 사이의 간격이 2초를 넘었을 때에만 API 호출이 발생하도록 하는 것입니다. 그 2초 사이에 사용자는 최소 몇 글자를 더 입력하게 되므로, 글자 하나하나마다 발생하던 API 호출 횟수가 크게 줄어듭니다. API 호출이 줄어들면 자연스럽게 브라우저 성능도 향상됩니다.
단, 주의할 점이 있습니다. 디바운싱 함수는 키 입력이 발생할 때마다 타이머를 새로 갱신한다는 것입니다. 즉, 사용자가 계속 입력하는 동안에는 호출이 보류되다가, 입력이 멈춘 뒤 설정된 시간이 지나야 비로소 함수가 실행됩니다.
예제 살펴보기
다음 예제에서는 버튼에 이벤트 리스너(event listener)를 연결하고, 클릭 시 디바운스(debounce) 함수를 호출하도록 구현했습니다. 디바운스 함수는 두 개의 매개변수를 받습니다. 하나는 실행할 함수이고, 다른 하나는 지연 시간을 나타내는 숫자(밀리초)입니다. 또한 내부에 타이머(Timer) 변수를 선언하는데, 이름 그대로 설정된 시간이 지난 후에 함수를 실행하는 역할을 합니다.
디바운스 버튼을 클릭하면 알림 창(alert)이 열리고 메시지가 표시됩니다. 여기서 중요한 점은 함수가 매번 갱신된다는 것입니다. 즉, 지연 시간(2초)이 지나기 전에 버튼을 다시 클릭하면 기존 타이머는 삭제되고 새로운 타이머가 시작됩니다. 이 작업을 수행하기 위해 clearTimeout() 함수가 사용됩니다.
예제 코드
<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
var button = document.getElementById("debounce");
var debounce = (func, delay) => {
let Timer
return function() {
const context = this
const args = arguments
clearTimeout(Timer)Timer= setTimeout(() =>
func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html>위 코드를 실행하면 화면에 다음과 같은 버튼이 표시됩니다.
버튼을 클릭한 뒤 2초를 기다리면 아래와 같은 알림 창이 출력됩니다. 만약 2초가 지나기 전에 버튼을 여러 번 클릭하더라도, 마지막 클릭 이후 2초가 경과했을 때 알림 창은 단 한 번만 나타납니다.
실행 결과
