JavaScript 实现鼠标悬停延迟触发事件的原理与代码

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>