debounce와 throttle의 개념 및 차이

 

 

개요

---

debounce와 throttle은 둘 다 이벤트가 너무 자주 발생하는 것을 제어하기 위한 기법입니다.

주로 브라우저 성능 최적화와 불필요한 함수 호출을 방지하기 위해 사용됩니다.

하지만 이들의 동작 방식과 사용 목적은 서로 다릅니다.

 

 

 

debounce의 개념

---

debounce를 사용하게 되면 이벤트가 여러 번 발생하더라도 마지막 이벤트가 발생한 후 일정 시간이 지나야 콜백 함수가 실행됩니다.

 

 주요특징

• 이벤트 발생 후 대기 시간 동안 새로운 이벤트가 발생하면 대기 시간이 리셋됩니다.
• 연속된 이벤트를 취소하고, 마지막 이벤트만 처리하려고 할 때 사용됩니다.

 

 

debouce의 사용사례

---

• 사용자가 입력할 때 마지막 입력만 처리:  검색창에서 사용자가 입력을 멈춘 후에만 서버 요청.
• 리소스 낭비 방지: 화면 크기를 변경할 때 마지막 크기 조정 이벤트만 처리하는 경우.

 

코드예제

import { debounce } from "lodash";

// Debounce 적용된 함수 (500ms)
const handleResize = debounce(() => {
  console.log("Window resized!");
}, 500);

window.addEventListener("resize", handleResize);

 

위 코드에서 사용자가 창 크기를 조정할 때, 조정이 멈춘 뒤 0.5초 후에만 handleResize가 실행됩니다.

 

 

throttle의 개념

---

이벤트가 여러 번 발생하더라도 일정 시간 간격마다 콜백 함수가 실행됩니다.

 

주요특징

• 이벤트가 너무 자주 발생하더라도 일정 주기로 콜백 함수가 실행
• 연속적인 이벤트 중 일부만 간격을 두고 처리하려고 할 때 사용

 

 

throttle의  사용사례

---

• 스크롤 이벤트 처리: 스크롤 중 특정 지점에서 상태 업데이트.
• 마우스 이동 이벤트 처리: 마우스를 움직이는 동안, 일정 시간마다 위치를 업데이트.

 

 코드예제

import { throttle } from "lodash";

// Throttle 적용된 함수 (500ms)
const handleScroll = throttle(() => {
  console.log("Scrolled!");
}, 500);

window.addEventListener("scroll", handleScroll);

 

위 코드에서 사용자가 스크롤할 때, handleScroll은 0.5초에 한 번씩만 실행됩니다.

 

 

언제 무엇을 사용해야 할까?

---

 

특징	debounce	throttle
실행 시점	마지막 이벤트 발생 후 일정 시간	일정 시간 간격으로 실행
주로 사용하는 상황	최종 입력만 처리해야 할 때	일정 간격으로 업데이트가 필요할 때
호출 횟수	이벤트 동안 한 번 (마지막에 실행)	일정 시간 간격으로 여러 번
대표적인 예시	자동완성, 검색창 입력, 화면 크기 조정	스크롤, 마우스 이동, 리소스 업데이트

 

debouce가 적합한 상황

• 빈번한 이벤트 중 마지막만 처리하고 싶을 때:
  • 사용자 입력이 끝난 후 검색 결과를 가져오는 기능.
  • 창 크기를 조정한 후 최종 크기를 기반으로 작업하는 기능.

 

 throttle이 적합한 상황

• 빈번한 이벤트 중 일정 간격으로 처리하고 싶을 때:
  • 스크롤 이벤트 중 특정 지점에 도달하면 상태를 업데이트.
  • 화면의 애니메이션이나 요소 위치를 지속적으로 업데이트.

 

조합해서 사용하는 경우 예시

예: 스크롤 이벤트에서 최적화

• 스크롤 중 지속적으로 업데이트: throttle 사용.
• 스크롤이 끝난 후 작업 실행: debounce 사용.

import { throttle, debounce } from "lodash";

const updatePosition = throttle(() => {
  console.log("Updating position...");
}, 200);

const logScrollEnd = debounce(() => {
  console.log("Scrolling ended!");
}, 500);

window.addEventListener("scroll", () => {
  updatePosition(); // 스크롤 중 업데이트
  logScrollEnd();   // 스크롤 끝난 후 실행
});

 

요약

---

• *debounce*는 입력 완료 후에 처리해야 할 작업에 적합.
• *throttle*은 이벤트의 빈도를 제한하면서 연속적으로 업데이트해야 할 작업에 적합.