debounce

· Frontend
오늘은 쓰로틀과 디바운스에 대해서 알아보겠습니다. 두 가지 기법 모두 DOM 이벤트가 발생했을 때 성능을 최적화하기 위한 기법입니다. Debounce 예를 들어 보죠. 유저가 검색창에 "보드게임"을 입력한다고 생각을 해봅시다. input 이벤트를 걸어둔다면 검색어를 입력할 때마다 이벤트 콜백함수가 실행될 겁니다. input.addEventListener("input", eventListener); ㅂ, 보, 보ㄷ, 보드, 보드ㄱ, 보드게, 보드게ㅇ, 보드게이, 보드게임 위처럼 각각에 대해 callback 함수를 실행시키는 것보다 유저가 검색어를 다 입력하면 콜백함수를 실행시키는 것이 자원 측면에서 더 효율적이죠. 이렇게 짧은 시간안에 많은 이벤트가 발생했을 경우 이를 무시하고 특정 시간이 지난 후에 이벤..
mechaniccoder
'debounce' 태그의 글 목록