防抖函数在编辑器实时预览中用于合并高频输入，待用户停顿后再执行一次渲染。它避免每键触发解析与重绘，防止卡顿、内存泄漏，优于节流；推荐闭包+定时器实现，并可优化加载态提示、手动刷新和内容变更比对。
在编辑器实时预览场景中，防抖函数的核心作用是：**避免用户每敲一个字符就触发一次渲染，把高频输入合并成一次延迟执行的渲染**。关键不是“完全不渲染”，而是“等用户停顿后再渲染”，既保证响应及时性，又防止性能浪费。
为什么编辑器里必须用防抖？
用户打字是连续行为，尤其在修改 Markdown、JSON 或代码时，每按一次键（甚至每次 `input` 事件）都调用解析 + 渲染函数，会导致：
- CPU 占用飙升，页面卡顿甚至假死
- DOM 频繁重绘/重排，滚动或输入体验变差
- 若依赖异步解析（如 marked、remark），大量未完成的 Promise 堆积，内存泄漏风险上升
基础防抖实现（推荐用闭包+定时器）
不用第三方库也能写得干净可靠：
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
// 使用示例
const renderPreview = debounce(() => {
const html = marked.parse(editor.value);
preview.innerHTML = html;
}, 300); // 停顿 300ms 后渲染
editor.addEventListener('input', renderPreview);
注意：这里用 闭包保存 timer，确保每次调用都清除前一次定时器，不会叠加执行。
立即学习“Java免费学习笔记（深入）”；
进阶优化：结合输入状态与手动触发
纯防抖可能让用户觉得“改完没反应”，可加两个实用策略：
-
输入中显示加载态：在 `clearTimeout` 后、`setTimeout` 前设置 loading 提示，比如 `渲染中…`，提升感知反馈
- 支持手动立即渲染：暴露一个 `flush()` 方法，供用户点击“刷新预览”按钮时立刻执行当前待执行的渲染
- 忽略空内容或无效变更：在防抖回调里先比对新旧内容（如 `if (newVal === oldVal) return`），避免无意义重绘
避坑提醒：别用节流，慎用 leading
节流（throttle）会让渲染固定频率执行（如每 500ms 一次），但用户可能刚输一半就触发，导致预览错乱；leading 模式（首次立即执行）在编辑器里反而违背“等停顿”的初衷，容易白忙活。防抖的 trailing 模式（延迟后执行）才是编辑器场景的黄金选择。
