728x90
한달 전에 다 끝난 프로젝트를 갑자기 VSC에서 키게 된 것은 요즘 면접 대비 공부를 하면서 디바운스라는 개념을 알게 되었기 때문이다.
디바운스는 일정 시간동안의 함수 호출을 막고 마지막의 한 번만 실행되도록 해서 서버 부하를 줄이는 기법이다.
검색 기능을 구현했던 것이 문득 생각이 나 당장 적용해보기로 했다.
기존 코드
keyup마다 함수가 호출되도록 했었는데, count 를 출력해보니 엄청많은 호출이 있었다..
디바운스 적용 후
let count = 0;
(function() {
let timer;
search_input.addEventListener("keyup", (e) => {
clearTimeout(timer);
timer = setTimeout(() => {
//수행할 함수 = ajax가 들어가는 부분
console.log(count++);
}, 200);
});
})();
함수 호출이 많이 줄어든 것을 확인할 수 있었다
'project' 카테고리의 다른 글
[Numble] 모바일용 웹 서비스 만들기 챌린지 회고록 (0) | 2022.05.16 |
---|---|
유니티 WebGL 배포 (0) | 2022.04.24 |
[Gymt] react-native와 Firebase 연결 (0) | 2022.01.06 |
[패션정보 웹] php로 대분류에 따른 소분류 만들기 (쿠키 사용) (0) | 2021.12.06 |
[감정인식 챗봇 스피커 '버디' 프로젝트] 데이터 전처리와 KoBert (0) | 2021.11.14 |