검색창 debounce 처리
지난 글 말미 (검색 자동완성 with mysql function)에
검색창에 검색추천 시 debounce처리를 해야 한다고 적어놨었는데, 그때 처리한 걸 정리하고자 적는다.
debounce란?
짧은 시간 여러번 동작하는 걸 막고, 한 번만 실행하게 해주는 방법으로 보통 웹 화면상에 검색창 검색 시 방문자가 타이핑을 끝내고 난 뒤에만 검색 질의(query)에 대한 제안 옵션을 보여주고 싶을 때 사용한다.
이를 통해 불필요한 네트워크 요청을 줄이고, 성능을 향상시킬 수 있다.
저번 글에선 DB function과 해당 함수를 사용하는 view에 질의를 하는 검색창을 하나 만들었었는데,
이때 한글자 타이핑시 ajax → db query 식으로 동작한다. 이걸 줄여보자.
javascript에서는 setTimeout을 통해 함수 지연실행을 할 수 있으니 해보자
우선 원본 코드다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
search :
<input type="text" id="search-input"/>
<ul id="stock_list">
</ul>
</body>
<script type="text/javascript">
$(document).ready(function() {
console.log("hi world");
$("#search-input").on("keyup", function() {
search();
});
});
function search() {
$("#stock_list").empty();
let searchText = $("#search-input").val();
if(searchText == "") return;
let data = { "searchText" : searchText };
$.ajax({
url : "/search",
// ...
});
}
</script>
</html>위 코드를 살펴보면 search-input에 글자를 치면 search 함수가 동작하게끔 구성되어 있다.
실제로 동작하는 화면을 살펴보면
중간에 setTimeout 함수로 동작을 지연시키는 함수를 하나 작성해 준다.
var timer;
function debounce(func, timeout=500) {
clearTimeout(timer);
timer = setTimeout(function(){
func();
}, timeout);
}
timer라는 전역변수를 설정하고, debounce 함수를 만든다.
debounce 함수는 func 함수 인자를 받아서 timeout 을 설정하고, timer에 저장, 0.5초 뒤에 동작한다.
이때 0.5초 보다 빠르게 debounce가 실행되면 clearTimeout으로 timer를 초기화 다시 timer를 저장하게 된다.
기존 코드를 아주 살짝 수정해 준다.
$(document).ready(function() {
console.log("hi world");
$("#search-input").on("keyup", function() {
debounce(function() {
search(); // <== debounce의 인자로 들어가게 됨
});
});
});
var timer;
function debounce(func, timeout=500) {
clearTimeout(timer);
timer = setTimeout(function(){
func();
}, timeout);
}
이후 어떻게 동작하는지 한번 보자.
실제로 조금씩 지연되어 갱신되는 걸 확인할 수 있다.
Debounce(디바운스) - JavaScript에서 함수를 지연시키는 방법 (JS ES6 예제)
JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해주는 함수입니다. 검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debou
www.freecodecamp.org