oninput="debounce(compile, 300)()" 失效，因内联事件每次重新解析导致闭包 timer 丢失、clearTimeout 失效、this 和 event 无法正确传递；须用 addEventListener 绑定预创建的防抖函数，并处理 composition 状态与 maxWait 兜底。
为什么 oninput="debounce(compile, 300)()" 在 HTML 在线运行工具里根本没用
因为 HTML 内联事件属性（如 oninput）每次触发都重新解析字符串，debounce() 返回的新函数无法维持闭包中的 timer 变量，上一次的定时器 ID 完全不可访问。结果就是：每次输入都新建一个独立定时器，clearTimeout 失效，防抖逻辑形同虚设。更糟的是，this 指向 window 或 undefined，event 对象也不会自动传入，参数全丢。
必须用 addEventListener 绑定预创建的防抖函数
在线运行工具（比如 JSBin、CodePen、Playcode）中，所有 JS 代码都在全局作用域执行，但防抖依赖稳定的闭包引用。你得先定义一次防抖函数，再把它绑定到元素上：
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
<p>const editor = document.getElementById('code-input');
const compile = () => console.log('编译:', editor.value);</p><p>// ✅ 正确：同一个函数引用被反复调用
editor.addEventListener('input', debounce(compile, 400));
- 监听
input事件，不是change（后者只在失焦时触发，无法实时响应） - 手写防抖必须用
fn.apply(this, args)，否则this和参数丢失 - 不要在
addEventListener回调里再调用debounce()，那会每次生成新函数，防抖失效
中文输入法下 input 事件乱触发？要加 composition 状态判断
在 CodePen 这类工具里测试中文输入时，你会发现拼音未确认阶段就疯狂触发 input，导致编译提前跑偏。这是因为软键盘在 compositionstart 到 compositionend 之间也会发 input。解决方案是手动标记输入法状态：
let isComposing = false;
<p>editor.addEventListener('compositionstart', () => isComposing = true);
editor.addEventListener('compositionend', () => {
isComposing = false;
// 此时才真正触发编译（可选：立即执行一次）
});</p><p>const debouncedCompile = debounce(() => {
if (!isComposing) compile();
}, 400);</p><p>editor.addEventListener('input', debouncedCompile);
-
compositionstart触发后，isComposing设为true，暂时抑制编译 -
compositionend后立刻检查并允许执行，避免用户敲完回车却没反应 - 不监听
compositionupdate—— 它在部分安卓机型上不可靠，且非必需
在线工具里漏掉 maxWait，用户狂敲就永远不编译
纯靠 wait（比如 400ms）扛不住用户持续输入。每敲一个字就 clearTimeout 再 setTimeout，结果就是永远等不到“停顿”。maxWait 是兜底保障：
立即学习“前端免费学习笔记（深入）”；
// 使用 Lodash？必须提前 import，并在 JS 区域定义一次
// const compileDebounced = _.debounce(compile, 400, { maxWait: 1200 });
<p>// 手写也得支持 maxWait
function debounce(fn, wait, options = {}) {
let timer = null;
let startTime = 0;
const { maxWait } = options;</p><p>return function(...args) {
const now = Date.now();
if (!startTime) startTime = now;</p><pre class="brush:php;toolbar:false;">clearTimeout(timer);
if (maxWait && now - startTime >= maxWait) {
fn.apply(this, args);
startTime = now;
} else {
timer = setTimeout(() => fn.apply(this, args), wait);
}}; }
- 典型配置：
{ wait: 400, maxWait: 1200 }→ 用户慢敲，400ms 后编译；狂敲，1200ms 内必编译一次 - 在线运行工具常用于演示，用户习惯快速修改+观察效果，
maxWait缺失会导致“改了但没反应”的困惑 - 别忘了在编译前加
loading状态或禁用按钮，否则用户可能重复点击触发多轮编译
真正难的不是写防抖函数，而是让同一个函数引用稳定复用、正确处理输入法生命周期、并设置合理的 maxWait。这三者漏掉任何一个，在线运行工具里都会表现为“看起来防抖了，但实际体验卡顿或延迟异常”。
