Skip to main content

Resize Debounce

Control the resize call frequency using the resizeDebounce and maxResizeDebounce options.

Try dragging the bottom-right corner of the container and compare the resize call frequency between the two carousels.

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

Summary​

Key Options​

OptionTypeDefaultDescription
resizeDebouncenumber0Resize call debounce delay (ms)
maxResizeDebouncenumber100Maximum debounce delay guarantee (ms)

Behavior Comparison​

SettingBehaviorBest For
resizeDebounce: 0Resize called immediately on size changeGeneral use (default)
resizeDebounce: 300Called after 300ms of no changesPerformance optimization during frequent size changes
resizeDebounce: 300 + maxResizeDebounce: 800300ms debounce + guaranteed every 800ms maxPeriodic updates needed even during continuous changes

Details​

resizeDebounce​

resizeDebounce delays the resize call by the specified time. If the size changes again during the delay, the timer is reset.

maxResizeDebounce​

maxResizeDebounce guarantees a maximum delay for debouncing. Even if resizeDebounce is set and continuous size changes occur, resize is executed at least once every maxResizeDebounce milliseconds.

Use Cases​

When should you use this?
  • Chat/live feeds: Reduce frequent resize calls with resizeDebounce
  • Draggable layouts: Guarantee intermediate updates with resizeDebounce + maxResizeDebounce
  • Typical responsive: Respond immediately with the default (resizeDebounce: 0)

Notes​

Caution
  • If the resizeDebounce value is too large, users may see panels repositioning late after a size change
  • maxResizeDebounce is only meaningful when resizeDebounce is greater than 0