内联 oninput 防抖必然失败，因每次触发重新求值字符串导致 debounce 返回新函数、timer 不共享、cleartimeout 失效、this 指向错误且 event 不传入；必须用 addeventlistener 绑定预定义的防抖函数。
直接用 oninput="debounce(compile, 300)()" 会彻底失效，CPU 占用反而更高——因为每次输入都新建一个定时器，旧的 never 被清除，大量 setTimeout 堆积在任务队列里空转。
为什么内联 oninput 防抖必然失败
HTML 内联事件（如 oninput）本质是字符串求值，每次触发都重新执行一遍 JS 字符串。这意味着：
-
debounce()每次返回的新函数不共享闭包，timer变量完全隔离 -
clearTimeout总是操作一个已销毁或不存在的 ID，等价于白跑 -
this指向window或undefined，event对象不会自动传入 - 若防抖函数未挂到
window，控制台立刻报ReferenceError: debounce is not defined
必须用 addEventListener 绑定预创建的防抖函数
只有显式绑定才能维持闭包中 timer 的跨次有效性。关键点：
- 防抖函数必须提前定义，且只定义一次（不能在回调里反复调用
debounce()） - 绑定时传入的是函数引用，不是调用结果：
editor.addEventListener('input', debouncedCompile) - 内部必须用
fn.apply(this, arguments)或fn.call(this, ...args)透传上下文和参数 - 中文输入法下需跳过
compositionstart→compositionend区间，否则拼音未确认就触发编译
示例逻辑：
let isComposing = false;
const editor = document.getElementById('code-input');
const compile = () => console.log('编译:', editor.value);
const debounce = (fn, delay) => {
let timer = null;
return function (...args) {
if (isComposing) return;
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
};
editor.addEventListener('compositionstart', () => isComposing = true);
editor.addEventListener('compositionend', () => isComposing = false);
editor.addEventListener('input', debounce(compile, 400));
range 输入滑块要换 rAF 节流，不能用 setTimeout 防抖
input 事件在 <input type="range"> 上每毫秒可触发数次，setTimeout 的延迟不可控，容易滞后；而 requestAnimationFrame 与渲染管线对齐，视觉更顺滑，且避免强制同步布局。
- 不要在
input回调里直接更新 DOM 或读取offsetHeight/getComputedStyle - 只缓存值、标记状态，用
let pending = false控制单帧最多执行一次更新 - 移动端尤其要注意
touch-action: none缺失会导致伪元素重绘卡顿
正确节流写法：
let pending = false;
const updateDisplay = () => {
pending = false;
displayEl.textContent = Number(rangeInput.value).toFixed(1);
};
rangeInput.addEventListener('input', () => {
if (!pending) {
pending = true;
requestAnimationFrame(updateDisplay);
}
});
最易被忽略的是：防抖/节流本身不解决计算开销，只控制执行节奏。如果 compile 函数内部做了 heavy parse 或递归 AST 遍历，再好的防抖也压不住 CPU——得把耗时操作切片、Web Worker 化，或加 maxWait 强制兜底执行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
