디바운스와 스로틀 — 이벤트 폭주를 제어하는 두 가지 전략

// 스크롤 이벤트 발생 횟수 확인
let count = 0;
window.addEventListener('scroll', () => {
  count++;
  console.log(`scroll 이벤트 발생: ${count}번`);
});

이벤트:  ──X──X──X──X──────────────────X──X──────────
                          ↓ 300ms 대기 후               ↓ 300ms 대기 후
실행:    ─────────────────✓────────────────────────────✓──

const searchInput = document.getElementById('search');

searchInput.addEventListener('input', (e) => {
  // 글자 하나 입력할 때마다 API 호출 → 비효율적
  fetchSuggestions(e.target.value);
});

function debounce(callback, delay) {
  let timerId = null; // 타이머 ID를 클로저로 기억

  return function (...args) {
    // 이전 타이머가 있으면 취소 (리셋)
    clearTimeout(timerId);

    // 새 타이머 설정
    timerId = setTimeout(() => {
      callback.apply(this, args); // this와 인자를 원본 그대로 전달
    }, delay);
  };
}

const searchInput = document.getElementById('search');

// 300ms 동안 입력이 없으면 실행
const handleSearch = debounce((e) => {
  fetchSuggestions(e.target.value);
}, 300);

searchInput.addEventListener('input', handleSearch);

이벤트:  ──X──X──X──X──X──X──X──X──X──X──
              ↓         ↓         ↓
실행:    ────✓─────────✓─────────✓────────
         200ms 간격    200ms 간격

window.addEventListener('scroll', () => {
  // 스크롤할 때마다 실행 → 초당 수십 번 호출
  checkScrollPosition();
});

function throttle(callback, limit) {
  let lastCall = 0; // 마지막 실행 시각

  return function (...args) {
    const now = Date.now();

    // 마지막 실행으로부터 limit ms가 지났으면 실행
    if (now - lastCall >= limit) {
      lastCall = now;
      callback.apply(this, args);
    }
    // 아직 안 지났으면 무시
  };
}

// 200ms 간격으로 스크롤 위치 체크
const handleScroll = throttle(() => {
  const scrollY = window.scrollY;
  const docHeight = document.documentElement.scrollHeight;
  const winHeight = window.innerHeight;

  // 하단 100px 이내에 도달하면 추가 로드
  if (scrollY + winHeight >= docHeight - 100) {
    loadMoreItems();
  }
}, 200);

window.addEventListener('scroll', handleScroll);

function throttle(callback, limit) {
  let waiting = false; // 대기 중인지 여부

  return function (...args) {
    if (!waiting) {
      callback.apply(this, args); // 즉시 실행
      waiting = true;

      setTimeout(() => {
        waiting = false; // limit 후 다시 실행 가능
      }, limit);
    }
  };
}

function debounce(callback, delay, options = {}) {
  let timerId = null;
  const leading = options.leading || false;

  return function (...args) {
    const isFirstCall = timerId === null;

    clearTimeout(timerId);

    // leading: 첫 번째 호출이면 즉시 실행
    if (leading && isFirstCall) {
      callback.apply(this, args);
    }

    timerId = setTimeout(() => {
      // trailing: leading이 아닐 때만 마지막에 실행
      if (!leading) {
        callback.apply(this, args);
      }
      timerId = null; // 리셋 — 다음 호출이 다시 "첫 번째"가 됨
    }, delay);
  };
}

// 결제 버튼 — 첫 클릭만 실행, 연타 무시
const handlePayment = debounce(
  () => submitPayment(),
  1000,
  { leading: true }
);

payButton.addEventListener('click', handlePayment);

function throttle(callback, limit, options = {}) {
  let lastCall = 0;
  let trailingTimer = null;
  const trailing = options.trailing !== false; // 기본 true

  return function (...args) {
    const now = Date.now();
    const remaining = limit - (now - lastCall);

    // 간격이 지났으면 즉시 실행 (leading)
    if (remaining <= 0) {
      clearTimeout(trailingTimer);
      lastCall = now;
      callback.apply(this, args);
    } else if (trailing && !trailingTimer) {
      // 간격 내에서 마지막 호출을 예약 (trailing)
      trailingTimer = setTimeout(() => {
        lastCall = Date.now();
        trailingTimer = null;
        callback.apply(this, args);
      }, remaining);
    }
  };
}

function throttleByRAF(callback) {
  let ticking = false; // 프레임 요청 중인지 여부

  return function (...args) {
    if (!ticking) {
      ticking = true;

      requestAnimationFrame(() => {
        callback.apply(this, args);
        ticking = false; // 다음 프레임 요청 가능
      });
    }
  };
}

// 스크롤 시 요소 위치를 부드럽게 업데이트
const handleScroll = throttleByRAF(() => {
  const scrollY = window.scrollY;
  // 패럴랙스 효과나 스크롤 기반 애니메이션
  parallaxElement.style.transform = `translateY(${scrollY * 0.5}px)`;
});

window.addEventListener('scroll', handleScroll);

import { debounce, throttle } from 'lodash';

// 디바운스 — 300ms 후 실행
const handleSearch = debounce((query) => {
  fetchSuggestions(query);
}, 300);

// 스로틀 — 200ms 간격으로 실행
const handleScroll = throttle(() => {
  checkScrollPosition();
}, 200);

// 컴포넌트 언마운트 시 정리
handleSearch.cancel();
handleScroll.cancel();

import { useMemo, useEffect } from 'react';
import { debounce } from 'lodash';

function SearchInput() {
  // useMemo로 디바운스 함수가 리렌더링마다 재생성되지 않도록 방지
  const handleSearch = useMemo(
    () => debounce((query) => {
      fetchSuggestions(query);
    }, 300),
    [] // 의존성 없음 — 한 번만 생성
  );

  // 컴포넌트 언마운트 시 타이머 정리
  useEffect(() => {
    return () => handleSearch.cancel();
  }, [handleSearch]);

  return (
    <input
      type="text"
      onChange={(e) => handleSearch(e.target.value)}
      placeholder="검색어를 입력하세요"
    />
  );
}