鼠标输入事件上的jQuery延迟出现问题

Trouble with jQuery delay on mouseenter event

本文关键字:延迟 问题 jQuery 输入 入事件 鼠标      更新时间:2024-02-19

这应该很简单。。。不知道为什么它会给我带来这样的麻烦。我有一个简单的鼠标输入功能。工作良好。我想做的是只有在悬停2.5秒后才能启动该功能。

我的工作功能是。。。

工作脚本

$('.profileimage').mouseenter(function(e) {
  $(this).parent().parent().find('.profileInfo').css({'top': (e.pageY + 25),'left': (e.pageX + 25)}).fadeIn('slow');
});

很简单。。。它所做的只是在我当前隐藏的CCD_ 1元素中淡入。

现在,为了增加延迟,我将其封装在setTimeout(function()中,因为在阅读了这里的其他一些帖子后,这似乎是正确的解决方案。所以现在我有了这个。。。

未运行脚本

$('.profileimage').mouseenter(function(e) {
  setTimeout(function() {
  $(this).parent().parent().find('.profileInfo').css({'top': (e.pageY + 25),'left': (e.pageX + 25)}).fadeIn('slow');
  }, 2500);
});

显然,我没有正确使用setTimeout函数,或者我认为这会起作用。

工作演示:http://jsbin.com/AqiFEQI/1/edit

损坏的演示:http://jsbin.com/AqiFEQI/2/edit

如果您尝试工作代码,当您将鼠标悬停在Charles上时,您会看到一个丑陋的div弹出。在破碎的样品中,什么也没发生。

任何帮助都将不胜感激。。。

当调用超时回调时,这将等于window。更改为

$('.profileimage').mouseenter(function(e) {
    var elem = this;
    setTimeout(function() {
       $(elem).parent().....;
    }, 2500);
});

更新的JSBin:http://jsbin.com/AqiFEQI/4/edit