Javascript 如果鼠标快速移动到元素上或离开元素，则防止.hover事件被垃圾邮件发送

我实现了一个简单的弹出窗口，当鼠标移动到某个元素上时会出现，但是，我可以通过在该元素上快速运行鼠标来引发一连串的

.hover

事件。我的意思是，即使我不再移动鼠标，弹出窗口也会多次出现和消失。这与CSS

：hover

规范形成对比，该规范只触发一次，而不管鼠标在元素上移动多少次

如何复制此功能？我已经包括了一个例子，我在下面的意思，尝试移动您的鼠标进出框快速看到的效果

jQuery（文档）.ready（函数（$）{
$（'#hover'）.hover（函数（事件）{
$（'.popup'）.fadeIn（200）；
}，功能（事件）{
$（'.popup'）.fadeOut（200，函数（）{
$（this.hide（）；
});
});
});
.popup{
宽度：200px；
高度：75px；
颜色：白色；
背景色：黑色；
显示：无；
}
.悬停框{
边缘顶部：100px；
宽度：200px；
高度：100px；
背景颜色：绿色；
}

你好，我是一个弹出窗口！
在我上空盘旋！
您可以使用setTimeout函数稍微延迟显示效果，并在
鼠标输出
事件上清除超时。大概是这样的：


jQuery（文档）.ready（函数（$）{
$（'#hover'）.hover（函数（事件）{
clearTimeout（$（this.data（'timeout'））；
$（this）.data（'timeout'，setTimeout（function（））{
$（'.popup'）.fadeIn（200）；
}, 300));
}，功能（事件）{
clearTimeout（$（this.data（'timeout'））；
$（'.popup'）.fadeOut（200，函数（）{
$（this.hide（）；
});
});
});
.popup{
宽度：200px；
高度：75px；
颜色：白色；
背景色：黑色；
显示：无；
}
.悬停框{
边缘顶部：100px；
宽度：200px；
高度：100px；
背景颜色：绿色；
}

你好，我是一个弹出窗口！
在我上空盘旋！