3~4주차 회고록
검색 페이지를 만들다가 input창에 제목을 입력 할 때마다 화면이 깜빡이는 느낌을 받았다. 그래서 콘솔로그를 찍어보니 제목을 입력 할 때마다 api를 계속 호출 하겠다는 생각이 들었다. 이것의 문제는 한 글자 칠 때마다 api가 계속 호출 되는 것인데, 이와 같은 낭비는 유료 API를 사용했을 때 큰 문제가 된다. 만약 구글지도 API같은 것을 사용할 때 위와 같이 쿼리를 10번 날리면 어마어마한 손해일 것이다. 쿼리 하나가 다 돈이라고 생각하면... 따라서 디바운싱은 비용적인 문제와도 관련이 있을 것이다. 나는 마지막 '제목'를 다 쳤을 때 api 요청을 보내고 싶다.이것을 해결 하기 위에 생각을 해보았는데 debounce을 적용 시키기로 하였다.
디바운싱 적용전
먼저 어떻게 구현 할지 생각 해보면 보통 사람들은 타자를 연달아 친다. 중간에 잠시 생각하느라 몇 초 쉴 수는 있겠지만 대부분 한번에 검색어를 입력한다. 따라서 입력이 다 끝난 후에 요청을 보내면 될 것이다. 위와 같이 하려면 타자를 칠 때 마다 타이머를 설정해야 한다.
200ms동안 입력이 없으면 입력이 끝난 것으로 치고, 200ms 이전에 타자 입력이 발생하면 이전 타이머는 취소하고 새로운 타이머를 다시 설정한다.
디바운싱 적용후
자바스크립트 debounce 코드
function debounce(callback, limit = 100) {
let timeout
return function(...args) {
clearTimeout(timeout)
timeout = setTimeout(() => {
callback.apply(this, args)
}, limit)
}
}
const searchtitleEl = document.getElementById('search_title')
searchtitleEl.addEventListener('input', debounce(function() {
let searchtext = searchtitleEl.value.trim();
findtitle(searchtext)
}, 200)
)limit가 경과하기 이전에 이벤트가 발생하면 이전 타이머를 취소하고
새로운 타이머를 재설정한다.
따라서 limit보다 짧은 간격으로 이벤트가 발생하면 callback은 호출되지 않는다.
200ms보다 짧은 간격으로 input 이벤트가 발생하면 debounce 함수의 콜백 함수는
호출되지 않다가 200ms 동안 input 이벤트가 더 이상 발생하면 한 번만 호출된다.
