# Trottle

2개의 포스트
post-thumbnail

[자바스크립트] Debounce 적용 사례 및 이슈

서론 업무를 처리하면서 지난 번에 정리한 적이 있는 Debounce를 적용할 일이 생겼었습니다. 직접 적용하면서 생각처럼 잘 적용이 되지 않았던 부분에 대해 정리하기 위해 이 게시글을 작성하게 되었습니다. 적용 사례 아래의 간단한 예시는 "검색" 버튼을 클릭하거나 "입력창"에서 "Enter" 버튼을 눌렀을 때 검색 내용에 입력 내용이 보여지는 기능을 갖고 있습니다. 또 검색창의 내용이 보여질 때마다 콘솔에 입력 내용을 출력하였습니다. !codesandbox[async-bash-5w9x13?fontsize=14&hidenavigation=1&theme=dark] 문제 상황 만약 입력창에 '검색 내용'을 입력하고 'Enter' 키를 연속해서 누르게 되면 아래와 같은 콘솔이 출력됩니다. ![](https://velog.ve

2023년 4월 5일
·
0개의 댓글
·
post-thumbnail

[자바스크립트] Debounce와 Trottle 개념

서론 scroll, resize, input, mousemove와 같은 이벤트는 짧은 시간 간격으로 연속해서 발생합니다. 이러한 이벤트에 바인딩한 이벤트 핸들러는 과도하게 호출되어 성능에 문제를 일으킬 수 있습니다. !codesandbox[nervous-meitner-7m3ve7?fontsize=14&hidenavigation=1&theme=dark] 디바운스(Debounce)와 스로틀(Throttle)을 통해 짧은 시간 간격으로 연속해서 발생하는 이벤트를 그룹화해서 과도한 이벤트 핸들러의 호출을 방지할 수 있습니다. 디바운스 디바운스는 짧은 시간 간격으로 이벤트가 연속해서 발생하면 이벤트 핸들러를 호출하지 않다가 일정 시간이 경과한 이후에 이벤트 핸들러가 한 번만 호출되도록 합니다. 즉, 디바운스는 짧은 시간 간격으로 발생하는 이벤트를 그룹화해서 마지막에 한 번만 이벤트 핸들러가 호출되도록 합니다. !

2023년 3월 10일
·
0개의 댓글
·