Throttle

Throttle (쓰로틀)

Throttle이란 특정 함수가 일정 시간 내에 최대 한 번만 실행되도록 제한하는 기법

이벤트가 아무리 많이 발생해도 지정한 delay 간격마다 딱 한 번만 실행됩니다.

비유

수도꼭지를 아무리 세게 틀어도, 밸브가 200ms마다 한 번씩만 물을 흘려보내는 것

코드 분석

const throttle = (fn, delay) => {
  let timer = null          // 타이머 ID 저장 변수

  return (...args) => {     // 실제로 호출될 래퍼 함수 반환
    if (!timer) {           // 타이머가 없을 때만 실행
      timer = setTimeout(() => {
        fn(...args)         // delay 후 원본 함수 실행
        timer = null        // 타이머 초기화 → 다음 실행 허용
      }, delay)
    }
    // timer가 있으면 아무것도 하지 않음 (무시)
  }
}
JavaScript
복사

실행 흐름

스크롤 이벤트 발생 횟수  →  [1]  [2]  [3]  [4]  [5] [6] ...
                            ↓
throttle(fn, 200ms) 적용 →  [1] 무시 무시 무시 [5] 무시 ...
                             ↑                  ↑
                          즉시 실행        200ms 후 실행
Plain Text
복사

Throttle vs Debounce 비교

구분	Throttle	Debounce
동작	일정 간격마다 한 번 실행	마지막 호출 후 일정 시간 뒤 실행
적합한 경우	스크롤, 리사이즈, 마우스 이동	검색창 입력, 버튼 중복 클릭 방지
중간 실행	있음 (주기적으로 실행)	없음 (끝나야 실행)

예시로 이해하기

이벤트:     ─────────────────────────────────────────▶
            ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑  ↑

Throttle:   ↑        ↑        ↑        ↑        ↑
            (200ms마다 한 번씩 실행)

Debounce:                                          ↑
            (이벤트가 멈추고 나서 200ms 후 한 번만 실행)
Plain Text
복사

실제 사용 예 (List.jsx)

// 200ms마다 한 번만 handleScroll 실행
const handleScroll = throttle(() => {
  const { scrollHeight, scrollTop, clientHeight } = element

  const isScrollingDown = scrollTop > prevScrollTop.current
  prevScrollTop.current = scrollTop

  if (isScrollingDown && clientHeight + scrollTop >= scrollHeight - 1) {
    addPage(nextPage) // 다음 페이지 로드
  }
}, 200)

element.addEventListener('scroll', handleScroll)
JavaScript
복사

스크롤 이벤트는 1초에 수십~수백 번 발생할 수 있습니다. Throttle을 적용하지 않으면 addPage()가 극히 짧은 시간에 수십 번 호출되어 서버 과부하 또는 중복 요청이 발생합니다.

라이브러리 활용

실무에서는 직접 구현하지 않고 lodash 라이브러리를 주로 사용합니다.

npm install lodash
Bash
복사

import { throttle } from 'lodash'

const handleScroll = throttle(() => {
  // ...
}, 200)
JavaScript
복사