防抖的核心是“等一等再执行”，用于解决鼠标快速扫过多元素时气泡频繁创建销毁导致的闪烁、卡顿与错位问题；通过 setTimeout + clearTimeout 仅响应最后一次悬停意图，确保停留超阈值才显示气泡，并要求 show/hide 函数幂等、tooltip 元素复用。
防抖的核心是“等一等再执行”，在鼠标悬停场景里，它解决的是：当用户快速扫过多个触发元素（比如一排按钮或表格行）时，气泡频繁创建、销毁、重定位导致的闪烁、卡顿甚至错位问题。
为什么需要防抖？
不加防抖时，每个 mouseenter 都立刻创建 tooltip，mouseleave 立刻销毁。但鼠标划过连续元素时，事件触发极快（毫秒级），JS 来不及完成上一个气泡的显示或隐藏逻辑，就收到下一个事件——结果就是气泡“跳动”“残留”“位置错乱”，甚至 DOM 节点反复增删影响性能。
防抖的关键实现方式
用 setTimeout + clearTimeout 控制延迟响应，只保留最后一次悬停意图：
Perplexity SEO Optimization Guide
下载
Perplexity SEO 优化指南 — 如何获得 Perplexity AI 的引用。涵盖 Perplexity 引用行为、面向 Perplexity 答案的内容结构、Perplex...
- mouseenter 时，先清除前一次的定时器（如果存在），再设新定时器（例如 200ms 后才真正显示气泡）
- mouseleave 时，同样清除当前定时器，且不触发显示——相当于取消本次悬停操作
- 只有当鼠标在某个元素上停留超过阈值（如 200ms），气泡才真正出现
实际代码结构示意
以原生 JS 为例（不依赖框架）：
let tooltipTimer = null;
element.addEventListener('mouseenter', () => {
clearTimeout(tooltipTimer);
tooltipTimer = setTimeout(() => {
showTooltip(element, '这是提示内容');
}, 200);
});
element.addEventListener('mouseleave', () => {
clearTimeout(tooltipTimer);
hideTooltip();
});
注意：showTooltip 和 hideTooltip 必须是幂等函数——重复调用不会报错或叠加效果；同时，tooltip 元素应复用（而非每次新建），避免内存泄漏和重绘开销。
进阶要点：结合位置更新与销毁
若气泡需跟随鼠标移动（如浮动 tip），防抖仅用于“是否显示”的决策，而mousemove 中的位置更新应另设轻量级防抖（如 16ms 节流）或 requestAnimationFrame，避免高频重定位拖慢页面。mouseleave 触发时，不仅要清除定时器，还要确保已显示的气泡被干净销毁（layer.close()、removeChild 或 setAttribute('aria-hidden', 'true')）。
