JS 中防抖节流在富文本编辑器内容自动同步中的应用-js教程-PHP中文网

自动同步必须用防抖，因其将高频输入收敛为停顿后的确定动作，避免重复请求、竞态丢失和界面卡顿；需组合监听input、selectionchange、compositionend事件，并做内容比对防无效提交。

js 中防抖节流在富文本编辑器内容自动同步中的应用

富文本编辑器内容自动同步，关键不在“立刻发”，而在“恰当时机发”。防抖和节流不是可选项，而是保障数据不丢、不乱、不卡的底层机制。

为什么自动同步必须用防抖

用户在富文本中操作极频繁：打字、删字、选中加粗、拖拽图片、光标跳转……每秒可能触发十几次 input、selectionchange 或 compositionend 事件。若每次变动都调保存接口：

大量重复请求堆积，后端压力陡增，尤其弱网下易超时失败
前一次保存还没返回，后一次已覆盖——导致中间修改丢失（竞态问题）
用户没感觉“在保存”，但页面变卡，因为 JS 线程被密集回调阻塞

防抖把“高频输入”收敛为“一次停顿后的确定动作”，只保留最后一次有效变更，天然契合“用户写完才存”的直觉。

单内容区防抖的实操要点

对基于 contenteditable 的编辑容器（如 <div id="editor" contenteditable>），不能只监听 <code>input —— 它对格式操作、粘贴、拖放不敏感。应组合监听：

input：处理纯文本输入
selectionchange：捕获光标移动、选区变化（可能触发工具栏更新或格式同步）
compositionend：确保中文输入法完成选词后才触发（避免拼音中途就发请求）

防抖逻辑需带内容比对，避免无意义提交：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

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