jquery - 如果元素已 'mouseover' ed 持续 500 毫秒，则使用 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");
  });
});
​