自动同步必须用防抖，因其将高频输入收敛为停顿后的确定动作，避免重复请求、竞态丢失和界面卡顿；需组合监听input、selectionchange、compositionend事件，并做内容比对防无效提交。
富文本编辑器内容自动同步，关键不在“立刻发”，而在“恰当时机发”。防抖和节流不是可选项，而是保障数据不丢、不乱、不卡的底层机制。
为什么自动同步必须用防抖
用户在富文本中操作极频繁：打字、删字、选中加粗、拖拽图片、光标跳转……每秒可能触发十几次 input、selectionchange 或 compositionend 事件。若每次变动都调保存接口：
- 大量重复请求堆积，后端压力陡增，尤其弱网下易超时失败
- 前一次保存还没返回，后一次已覆盖——导致中间修改丢失（竞态问题）
- 用户没感觉“在保存”，但页面变卡，因为 JS 线程被密集回调阻塞
防抖把“高频输入”收敛为“一次停顿后的确定动作”，只保留最后一次有效变更，天然契合“用户写完才存”的直觉。
单内容区防抖的实操要点
对基于 contenteditable 的编辑容器（如 <div id="editor" contenteditable>），不能只监听 input —— 它对格式操作、粘贴、拖放不敏感。应组合监听：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
-
input：处理纯文本输入 -
selectionchange：捕获光标移动、选区变化（可能触发工具栏更新或格式同步） -
compositionend：确保中文输入法完成选词后才触发（避免拼音中途就发请求）
防抖逻辑需带内容比对，避免无意义提交：
let saveTimer;
const editor = document.getElementById('editor');
let lastSavedHtml = editor.innerHTML;
const debouncedSave = () => {
if (editor.innerHTML !== lastSavedHtml) {
saveToServer(editor.innerHTML);
lastSavedHtml = editor.innerHTML;
}
};
['input', 'selectionchange', 'compositionend'].forEach(event => {
editor.addEventListener(event, () => {
clearTimeout(saveTimer);
saveTimer = setTimeout(debouncedSave, 1000);
});
});
多字段/混合内容需独立防抖
真实编辑器往往含标题、正文、摘要、标签等独立可编辑区域。共用一个定时器会导致：改标题时清掉正文的待保存任务，正文修改被丢弃。
- 为每个字段维护专属 timer ID，例如用
Map存储：fieldTimers.set('title', timerId) - 保存请求携带字段标识（如
{ field: 'content', html: '...' }），服务端按字段原子更新 - 全局
isUnsaved标志应在任一字段变更时置true，任意字段保存成功后检查是否全部已同步，再置false
配合 beforeunload 防意外丢失
防抖解决“高频保存”，但挡不住用户直接关页或刷新。必须补上兜底：
- 任意编辑后立即设
isUnsaved = true - 保存成功回调里设
isUnsaved = false - 监听
beforeunload，若isUnsaved为真，触发一次同步保存（注意：现代浏览器仅允许弹出默认提示，不可自定义文案，但能阻断关闭流程）
不复杂但容易忽略
