Editorial illustration.
Originally published 23 June 2023; rewritten and reviewed on 15 October 2026.
A form quietly saves while someone types. Then a slow response from an earlier request arrives after a later edit, and the page announces “saved.” The timer is easy to implement; the difficult part is deciding which version of the document that message describes.
Use inactivity as the trigger
A debounce waits until input has been quiet for the chosen interval. Five seconds is a product choice, not a framework requirement:
let timer;
let revision = 0;
form.addEventListener('input', () => {
const requestedRevision = ++revision;
clearTimeout(timer);
timer = setTimeout(async () => {
const payload = new FormData(form);
payload.set('clientRevision', String(requestedRevision));
try {
const response = await fetch(form.action, {
method: 'POST', body: payload, credentials: 'same-origin'
});
if (!response.ok) throw new Error('Save failed');
if (requestedRevision === revision) showSaved();
} catch {
if (requestedRevision === revision) showSaveError();
}
}, 5000);
});
Here form, showSaved and showSaveError are application-owned elements and handlers. Include the correct antiforgery mechanism and accessible status region.
Give the server a conflict policy
A client revision helps the UI ignore stale acknowledgements. It does not by itself prevent database overwrites. The server needs an appropriate concurrency token or another policy for comparing the submitted version with the current record.
Validate authorisation and draft data independently of final submission. Some incomplete values may be legitimate in a draft but invalid for publishing.
Preserve a manual recovery route
Show saving, saved and failed states only when supported by the response. Keep an explicit save or retry route where the workflow needs one. Do not promise that a browser-close event will finish a network save.
Test rapid edits, two tabs and an offline interval. A reassuring autosave indicator is useful only when it describes the version the user can actually recover.