鼠标移动太快并触发其他按钮功能-JavaScript

Question

我有一个带有12个按钮的div，并以网格布局。每个按钮都有一个JS mouseenter（），它会淡出其他11个按钮。缓慢移动鼠标时效果很好。但是，如果将鼠标移到另一个按钮上的速度过快，则mouseleave（）函数不会运行，并且错误的按钮会淡入或淡出。做研究，试图找出解决此问题的最佳方法。

与何时添加/删除eventListeners有关吗？还是设置某种延迟，以使buttonFade（）函数仅在鼠标停放几毫秒后才能运行？

我现在的页面上有这种时髦的行为，是www.finleyfilms.com。

Answer 1

您应该使用setTimeout并等待例如500毫秒，然后触发关键帧或其他CSS。否则，如果将鼠标移到500ms之前，则可以删除超时。

const timeoutId = setTimeout(function() {
  button.addClass("realTrigger");
}, 500);
button.mouseleave(function() {
  clearTimeout(timeoutId);
  button.removeClass("realTrigger");
});