Debounce / Throttle

1. 사용목적

• 동일한 이벤트가 연속적으로 발생하면 브라우저 성능 저하가 발생할 수 있습니다.
• 연속적으로 발생하는 이벤트를 그룹화하여 한번만 실행하거나, 주기적인 처리, 중복을 방지하여 성능이슈를 해결할 수 있습니다.

lodash란?

💡 lodash는 자바스크립트의 인기 라이브러리다.

• debounce나 throttle처럼 구현하기 번거로운 함수들을 제공한다.

1. 디바운스 (Debounce)

• 설명
  • 지정 시간 내에 연속으로 발생하는 이벤트를 그룹화 하여 마지막 한번 이벤트 실행
• 동작 원리
  • 디바운스 함수를 만들고 콜백과 지정 시간을 인자로 전달합니다.
  • 이벤트가 발생하면 타이머를 설정 -> 이미 설정된 타이머가 존재하면 초기화
  • 타이머가 완료되면 콜백을 한 번 실행
  • 마지막 발생 이벤트를 기준으로 타이머 설정, 타이머가 완료되면 함수를 실행함
• 사용 예시
  • 입력 폼 자동완성
  • toggle
  • autoComplete

import debounce from 'lodash';

async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  debounce(async () => {
    // 😕 debounced function never called
    await search(e.target.value);
  }, 300);
}

2. 스로틀 (throttle)

• 설명
  • 일정 시간 안에 마지막으로 실행된 이벤트만 실행하는 방법
  • throttle 의 설정시간으로 1ms 를 주게되면 해당 이벤트는 1ms 동안 최대 한번만 발생
• 동작 원리
  • 콜백과 지정 시간을 인자로 전달합니다.
  • 이벤트가 발생하면 타이머 설정 -> 지정 시간 내에 이벤트가 다시 발생하면 모두 무시
  • 최초 설정된 타이머가 완료되면 콜백 실행, 이후 이벤트 발생하면 다시 타이머 지정
• 사용 예시
  • 스크롤, 드래그 이벤트
  • 무한 스크롤 구현

import debounce from 'lodash';

const cbFunc = () => {
  return console.log('mousemove Event');
}

$(window).on("mousemove", _.throttle(cbFunc, 500))