Debounce / Throttle

이재철·2022년 6월 26일
0

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))
profile
혼신의 힘을 다하다 🤷‍♂️

0개의 댓글