Debounce サーバ同期

:LiTarget: 用途

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

:LiSparkle: 特徴

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

:LiCode: コード（コピペ用）

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);
}

:LiHandPointer: 使い方

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

:LiAlertCircle: 注意事項

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