자바스크립트 debounce와 throttle 차이 및 성능 최적화 예제
·
Programing/javascript
사용자 입력, 스크롤, 리사이즈 등 브라우저 이벤트는 짧은 시간에 여러 번 연속으로 발생하는 경우가 많습니다. 이런 경우, 무분별하게 이벤트 핸들러가 호출되면 성능 저하가 발생할 수 있습니다. 이를 방지하기 위해 자바스크립트에서는 debounce(디바운스)와 throttle(스로틀) 기법을 활용합니다.이 글에서는 두 개념의 차이점과 활용 예제를 정리합니다.✨ debounce란?연속된 이벤트 중 마지막 이벤트가 발생한 후 일정 시간 동안 아무 동작이 없을 때 한 번만 실행하는 방식입니다.📌 사용 시점검색창 자동완성입력창 유효성 검사창 크기 조절 이벤트 처리예제:function debounce(fn, delay) { let timer; return function(...args) { clearTi..