🚀 新規事業
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 を流し込むだけ。
注意事項
- 依存パッケージを忘れず追加