JavaScript Academy · 강의

디바운스와 스로틀 — 직접 구현하기

작은 디바운스와 스로틀 도구를 만듭니다. 후행·선행 변형을 연습하고 각각 언제 선택할지 알아봅니다.

디바운스와 스로틀 — 직접 구현하기은(는) CoddyKit의 무료 JavaScript Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 JavaScript Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

개요

목표: 자주 발생하는 이벤트를 제어합니다.

디바운스: 조용해질 때까지 기다렸다가 한 번 실행
스로틀: 간격마다 최대 한 번 실행
선행 호출과 후행 호출
작고 읽기 쉬운 도우미

디바운스(후행)

후행 디바운스는 이벤트가 발생할 때마다 타이머를 재설정하고, 상황이 잠잠해지면 한 번 실행합니다.

// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
  let t = null;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(function () {
      fn.apply(null, args);
    }, wait);
  };
}

// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
  console.log("debounced:", msg);
}, 10);

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    debouncedLog("final after bursts");
  }, i * 3);
}

디바운스(선행)

선행 디바운스는 즉시 실행한 다음, 조용한 시간이 끝날 때까지 반복 실행을 막습니다.

// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
  let t = null;
  return function (...args) {
    if (t === null) {
      fn.apply(null, args);
    }
    clearTimeout(t);
    t = setTimeout(function () {
      t = null;
    }, wait);
  };
}

// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
  console.log("leading:", x);
}, 12);

for (let i = 0; i < 4; i++) {
  setTimeout(function () {
    firstTap("first-then-wait");
  }, i * 3);
}

스로틀(선행)

스로틀은 시간 구간마다 호출을 한 번으로 제한하고, 초과 호출은 버립니다.

// Throttle (leading): at most once per interval
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(null, args);
    }
  };
}

// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
  console.log("throttled:", n);
}, 10);

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    throttled(i);
  }, i * 2);
}

스로틀(후행)

후행 스로틀은 시간 구간이 끝날 때 최신 값도 받을 수 있도록 합니다.

// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
  let last = 0;
  let timer = null;
  let queuedArgs = null;

  function invoke(args) {
    last = Date.now();
    fn.apply(null, args);
  }

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      // Window passed: run now
      clearTimeout(timer);
      timer = null;
      queuedArgs = null;
      invoke(args);
    } else {
      // Queue the latest args to run at the end of the window
      queuedArgs = args;
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        if (queuedArgs) {
          invoke(queuedArgs);
          queuedArgs = null;
        }
      }, remaining);
    }
  };
}

// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
  console.log("trail:", x);
}, 10);

for (let i = 0; i < 6; i++) {
  setTimeout(function () {
    trail("v" + i);
  }, i * 3);
}

어떤 것을 사용할까요

선택 기준:

디바운스: 입력하면서 검색하거나 크기를 조정할 때 — 사용자가 멈춘 후에 실행합니다.
스로틀: 스크롤하거나 드래그할 때 — 호출을 일정한 속도로 제한합니다.
즉각적인 피드백에는 선행 방식을, 최종 값을 반영하려면 후행 방식을 사용합니다.

디바운스와 스로틀 퀴즈

빠른 확인: 시간 구간마다 호출 제한하기입니다.

복습

복습: 후행 및 선행 디바운스, 간단한 선행 스로틀, 가벼운 후행 스로틀을 작성했습니다. “사용자가 멈춘 후”에는 디바운스를, “일정한 속도”에는 스로틀을 선택합니다.

자주 묻는 질문

“디바운스와 스로틀 — 직접 구현하기” 강의는 무료인가요?

네 — “디바운스와 스로틀 — 직접 구현하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 JavaScript Academy 강의 전체를 잠금 해제할 수 있습니다. JavaScript Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“디바운스와 스로틀 — 직접 구현하기”에서 뭘 배우나요?

작은 디바운스와 스로틀 도구를 만듭니다. 후행·선행 변형을 연습하고 각각 언제 선택할지 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 JavaScript Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

JavaScript Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 JavaScript Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“디바운스와 스로틀 — 직접 구현하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 JavaScript Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 JavaScript Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← JavaScript Academy(으)로 돌아가기