문제상황

• 영상에서 보시다시피 마우스가 1px 움직일 때마다 함수를 호출해서 그려주고 있습니다.
• 이렇게 실행하게 되면 프로그램에 부하가 걸릴 위험이 있습니다.
• 이 문제는 Debounce를 통해 해결할 수 있습니다.

☘️ Debounce

• 정의

  • 이벤트들을 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술입니다.
  • 순차적 호출을 하나의 그룹으로 그룹화 할 수 있습니다.
  • 연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 기술입니다.

• 예시

// debounce 구현 함수
function debounce(callback, limit = 100) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      callback.apply(this, args);
    }, limit);
  };
}

// 마우스가 움직일 때 debounce 함수를 실행
ground.addEventListener(
  "mousemove",
  debounce(({ offsetX: x, offsetY: y }) => {
    let template = `
    <div class="emotion" style="top:${y}px;left:${x}px">😍</div>
  `;
     
    ground.insertAdjacentHTML("beforeend", template);
  })
);

주어진 코드는 디바운스(debounce) 기능을 구현하고 마우스 이벤트(mousemove)에 이를 적용하는 JavaScript 코드입니다.코드의 주요 구성 요소를 살펴보겠습니다.

• debounce: 디바운스 로직을 구현한 함수입니다.
• callback: 실행할 콜백 함수를 받습니다.
• limit: 디바운스 지연 시간을 나타내는 매개변수로기본값은 100ms로 설정되어 있습니다.
• mousemove: 이벤트 핸들러: ground 요소에서 발생하는 마우스 이벤트(mousemove)에 debounce 함수를 적용합니다.

debounce에서 반환된 함수는 디바운스된 동작을 수행하며, 이 함수 내부에서 clearTimeout을 사용하여 0.1초 안에 debounce를 실행하게 되면 기존 타이머를 제거하고 setTimeout을 통해 새로운 타이머를 설정합니다.

마우스가 1px이라도 움직일 때마다 debounce에서 return하는 함수가 실행됩니다.

마우스 이벤트의 offsetX와 offsetY 값을 활용하여 특정 위치에 이모티콘(😍)을 표시하는 HTML 요소를 동적으로 생성하여 ground 요소에 추가합니다.

해당 코드는 마우스 이동 이벤트가 발생할 때마다 이모티콘을 추가하는데, debounce 함수를 적용함으로써 일정 시간 간격 내에 마지막 마우스 이벤트만을 처리하도록 제어하고 있습니다. 이를 통해 불필요한 작업을 방지하고 성능을 최적화할 수 있습니다.