🚀 新規事業

debounce-save

最終更新 2026年05月09日 / 40_新規事業/SCALE_Build/カタログ/機能集/debounce-save.md

Debounce サーバ同期

用途

ローカル更新を debounce してサーバ送信。連続編集を1リクエストに集約。

特徴

  • debounce 1秒
  • バッチ送信
  • リトライ
  • 保存中インジケータ

コード(コピペ用)

let _saveTimer = null;
const _pending = new Map();
function scheduleServerSync(key, value) {
  _pending.set(key, value);
  if (_saveTimer) clearTimeout(_saveTimer);
  _saveTimer = setTimeout(async () => {
    const batch = Object.fromEntries(_pending);
    _pending.clear();
    try { await fetch('/api/data', { method: 'POST', body: JSON.stringify(batch) }); }
    catch { /* リトライキューに戻す */ }
  }, 1000);
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

  • 依存パッケージを忘れず追加