디바운스 debounce의 개념

특정 환경에선 디바운스라는것이 필요합니다 ex) autocomplete

검색등을 할때 한글자치면 자동으로 검색툴팁이 내려오는것을 본적이 있으실텐데

잘못만들면 무엇을 검색할때 자음단위로 검색하게 됩니다.

안녕하세요 -> ㅇㅏㄴㄴㅕㅇㅎㅏㅅㅔㅇㅛ -> 12번의 호출을 하게되겠죠. 그럴경우 

특정 시간내의 재호출되는걸 막는것을 디바운스라고 합니다.

같은 개념으로 키보드에서도 디바운싱이라는 개념이 같은 원리 입니다.

아래는 autocomplete 디바운싱에 샘플코드 입니다.

$("#barcode").autocomplete({

    source: [],

    select: function(event, ui) {

        setTimeout(() => {

            $('#barcode').val(ui.item.value);

        }, 50);

    },

    change: function(event, ui) {

        return false;

    },

    focus: function(event, ui) {

        return false;

    },

    create: function() {

        // Autocomplete가 생성될 때의 처리

        $(this).data('ui-autocomplete')._renderItem = function(ul, item) {

            return $("<li>")

                .append('<div><img class="material-img" src="' + item.img + '" /><span>' + item.label + '</span></div>')

                .appendTo(ul);

        };

    }

}).on("keyup", debounce(function(event) {

    var name = event.target.value;

    var codes = [13, 27, 37, 38, 39, 40];

    if (codes.indexOf(event.keyCode) > -1) {

        return;

    }

    $.ajax({

        type: 'post',

        async: false,

        dataType: "json",

        data: {

            'mode': 'itemSearch',

            'name': name

        },

        success: function(data) {

            $("#barcode").autocomplete("option", "source", data).autocomplete("search");

        }

    });

}, 500));

function debounce(func, delay) {

    let timer;

    return function() {

        clearTimeout(timer);

        timer = setTimeout(() => {

            func.apply(this, arguments);

        }, delay);

    };

}