본문으로 건너뛰기

Resize Debounce

resizeDebounce와 maxResizeDebounce 옵션으로 리사이즈 호출 빈도를 제어합니다.

컨테이너 오른쪽 하단을 드래그하면서 두 캐러셀의 resize 호출 빈도를 비교해 보세요.

import Flicking from "@egjs/flicking";
import "@egjs/flicking/dist/flicking.css";
import "./styles.css";

function formatTime() {
  return new Date().toLocaleTimeString("ko-KR", {
    hour12: false,
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    fractionalSecondDigits: 3
  });
}

// debounce: 0 (default)
const flickA = new Flicking("#flick-a", {
  resizeDebounce: 0,
  maxResizeDebounce: 100
});

// debounce: 300ms / maxDebounce: 800ms
const flickB = new Flicking("#flick-b", {
  resizeDebounce: 300,
  maxResizeDebounce: 800
});

const logElA = document.getElementById("log-a");
const logElB = document.getElementById("log-b");
const countElA = document.getElementById("count-a");
const countElB = document.getElementById("count-b");
const logsA = [];
const logsB = [];

function addLog(logs, logEl, countEl) {
  logs.unshift(`[${formatTime()}] resize()`);
  if (logs.length > 30) logs.pop();
  logEl.innerHTML = logs.map(l => `<div>${l}</div>`).join("");
  countEl.textContent = `${logs.length}x`;
}

flickA.on("afterResize", () => addLog(logsA, logElA, countElA));
flickB.on("afterResize", () => addLog(logsB, logElB, countElB));

// Change container width via slider
const slider = document.getElementById("width-slider");
const valueLabel = document.getElementById("width-value");
const wrapA = document.getElementById("wrap-a");
const wrapB = document.getElementById("wrap-b");

slider.addEventListener("input", () => {
  const w = `${slider.value}%`;
  wrapA.style.width = w;
  wrapB.style.width = w;
  valueLabel.textContent = `${slider.value}%`;
});
Open on CodeSandboxOpen Sandbox

요약​

주요 옵션​

옵션타입기본값설명
resizeDebouncenumber0resize 호출 디바운스 지연 (ms)
maxResizeDebouncenumber100디바운스 최대 지연 보장 (ms)

동작 비교​

설정동작적합한 상황
resizeDebounce: 0크기 변경 즉시 resize 호출일반적인 사용 (기본값)
resizeDebounce: 300300ms 동안 변경이 없으면 호출빈번한 크기 변경 시 성능 최적화
resizeDebounce: 300 + maxResizeDebounce: 800300ms 디바운스 + 최대 800ms마다 보장연속 변경 중에도 주기적 업데이트 필요

상세 설명​

resizeDebounce​

resizeDebounce는 resize 호출을 지정된 시간만큼 지연시킵니다. 지연 중 크기가 다시 변경되면 타이머가 리셋됩니다.

maxResizeDebounce​

maxResizeDebounce는 디바운스 지연의 최대치를 보장합니다. resizeDebounce가 설정되어 있고 연속적인 크기 변경이 일어나더라도, 최소한 maxResizeDebounce 밀리초마다 한 번은 resize가 실행됩니다.

사용 시나리오​

언제 사용하나요?
  • 채팅/라이브 피드: resizeDebounce로 빈번한 resize 콜 절감
  • 드래그 가능한 레이아웃: resizeDebounce + maxResizeDebounce로 중간 업데이트 보장
  • 일반적인 반응형: 기본값(resizeDebounce: 0)으로 즉시 반응

주의사항​

주의
  • resizeDebounce 값이 너무 크면 사용자가 크기 변경 후 패널이 늦게 재배치되어 보일 수 있습니다
  • maxResizeDebounce는 resizeDebounce가 0보다 클 때만 의미가 있습니다

관련 링크​

관련 옵션​

관련 데모​