본문 바로가기
text/JavaScript

검색창 debounce 처리

by hoonzii 2024. 4. 14.
반응형

지난 글 말미 (검색 자동완성 with mysql function)에

검색창에 검색추천 시 debounce처리를 해야 한다고 적어놨었는데, 그때 처리한 걸 정리하고자 적는다.

 

bounce ball

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);
    }
    

     

    이후 어떻게 동작하는지 한번 보자.

     

     

    실제로 조금씩 지연되어 갱신되는 걸 확인할 수 있다. 

     

     

    ref) https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/ 

     

    Debounce(디바운스) - JavaScript에서 함수를 지연시키는 방법 (JS ES6 예제)

    JavaScript에서 debounce(디바운스)는 유저가 입력할 때마다 코드를 오직 한 번씩만 실행되도록 해주는 함수입니다. 검색 박스의 제안, 텍스트 필드의 자동 저장, 버튼의 더블 클릭의 제거가 모두 debou

    www.freecodecamp.org

     

    반응형

    댓글