Thottle과 Debounce

jplendor·2022년 5월 24일

배경 및 문제 상황

제품 검색창에 연관검색어 리스트를 보여주고자 했다.
입력창의 value가 바뀔 때 마다 api 요청을 보내는 것은 서버의 과부하를 가져오고, 필요하지도 않다.
아래 코드는 실제 api 요청 없이 문제 상황을 구현한 html, js
getRecommendList가 연관검색어 조회 api 호출과 같은 역할

index.html

...
<body>
    <input type="text" id="search" autocomplete="off">
    <ul id="recommend-list"></ul>
</body>
...

index.js

const fakeData = [
    "가죽 치마",
    "가죽 가방",
    "가죽 벨트",
    "쑥 라떼",
    "카페",
    "도서관",
];

const init = () => {
    const inputElem = document.querySelector("#search");
    inputElem.addEventListener("input", handleChange);
};

const handleChange = (e) => {
    const keyword = e.target.value;
    console.log(`keyword : ${keyword}`);
    if (keyword.length !== 0) {
        const recommendList = getRecommendList(keyword);
        setLi(recommendList);
    } else {
        setLi([]);
    }
};

const getRecommendList = (keyword) => {
    return fakeData.filter((item) => item.startsWith(keyword));
};

const setLi = (recommendList) => {
    const ulElem = document.querySelector("#recommend-list");
    ulElem.innerHTML = "";
    recommendList.forEach((item) => {
        const liElem = document.createElement("li");
        liElem.innerText = item;
        ulElem.appendChild(liElem);
    });
};

init();