本文解析了如何在JavaScript中实现鼠标悬停后的延迟触发功能。通过 setInterval 将总延迟时间均分为多次递增判断，当计数达到阈值时执行回调函数，并在鼠标移出时清除定时器以取消延迟。该方法适用于需要避免误操作或优化交互体验的场景，代码包含完整的变量绑定与逻辑控制。
JS鼠标悬停延迟触发原理
实现思路如下：当用户鼠标划过元素时，初始化一个计数器变量 i 为 0。接着启动一个定时器，每隔 100 毫秒使 i 自增 1。当 i 的值等于 10 时，累计时间恰好为 1 秒（10 * 100ms），此时触发目标事件。如果在此过程中鼠标移出，则使用 clearInterval 清除定时器，阻止 i 继续增加，从而取消延迟触发。
核心代码实现
具体实现代码如下：
var delay = function(t, fn) {
var i = 0,
j = 10,
t = (t * 1000) / j,
// 将总延迟时间平均分割为 10 份
_this = this,
// 解决 this 指向问题，调用 delay 函数时需确保 this 指向正确的对象
d = setInterval(function() {
i++;
if (i == j) {
clearInterval(d);
fn.apply(_this);
};
}, t);
_this.onmouseout = function() {
clearInterval(d);
};
} // 测试代码区域
<div id="test" style="border: 1px solid #CCC; width: 100px; height: 100px; background: #666;">这是一个测试DIV把鼠标放在上面2秒后会弹出他的ID</div> [Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]