如果元素已被'鼠标悬停'持续500ms,则使用jQuery运行函数

Question

为了我的用户的理智,我希望在选择器悬停半秒后而不是在它们悬停时立即运行"鼠标悬停"事件.

我首先尝试了一个setTimeout函数但是运行了很长时间,元素已经被徘徊,我猜想我没想过太多.我也花了一天(开和关)搜索(和玩Pacman)没有结果,除非我在寻找错误的东西.

如果可以的话,我想保留这个插件,纯粹是为了运行速度和可维护性.

$("#mySelector").mouseover(function(){
    // Run after 500ms
    $(this).addClass("hasBeen500ms");
});

让我们看看我们是否可以解决这个问题,我知道它会有这么多应用程序!

Answer 1

在延迟过期时阻止显示鼠标是否已经输出,并在鼠标输出时删除类:

$("#mySelector").mouseenter(function() {
  var el = $(this);
  var timeoutId = setTimeout(function() {
    el.addClass("hasBeen500ms");
  }, 500);
  el.mouseleave(function() {
    clearTimeout(timeoutId);
    el.removeClass("hasBeen500ms");
  });
});
?