在 mouseenter 函数中设置计时器/设置超时延迟答案

【问题标题】：set timer/ set timeout delay in mouseenter function在 mouseenter 函数中设置计时器/设置超时延迟
【发布时间】：2023-03-23 22:47:02
【问题描述】：

由于某种原因，我无法让它超时 - 我想要延迟，因为目前，当用户只是将鼠标移到元素上时它开始弹跳，并且如果用户用鼠标越过按钮3 次，反弹会反弹，你猜对了 - 3 次！

所以我的想法是在激活反弹功能之前将反应延迟 250 毫秒。

Hoverintent 让我大吃一惊，所以我正在尝试设置超时？

<script type='text/javascript'>//<![CDATA[ 
$(function(){
//Hover your mouse pointer over the orange box
$('#myimage').mouseenter(function() {

    $(this).effect('bounce',500);
});
});//]]>  

</script>

马特

【问题讨论】：

只要使用.delay()
@Dom 延迟不起作用，因为它只会延迟动画，如果你悬停 3 次，它仍然会弹跳 3 次
根据标题和内容，我认为这就是 OP 想要的......我很抱歉。
OP 在这个问题上不太清楚，但我很确定他想实现类似 hoverintent 的东西，所以正常的旅行页面悬停不会触发反弹

标签： jquery delay settimeout

【解决方案1】：

如果我正确理解了您的问题，则问题不在于delay，因为即使用户错误地将鼠标移到图像上，mouseenter 已经被触发，它会开始反弹，而是设置一个标志来检查鼠标是否在图像上至少 500 毫秒，然后触发图像反弹效果。

 var flag = false;
 $('#myimage').hover(function(){
      flag = true;
      var that = $(this);
      window.setTimeout(function(){
          if(flag) that.effect('bounce', 500);
      }, 300);
 }, function(){
      flag = false;
 });

【讨论】：

我投票赞成你的答案，因为逻辑是正确的，但我没有验证代码。在我目前的预测中，我们设置了一个超时，所以如果鼠标暂停（xxx ms）然后做你的事情，如果鼠标离开清除超时所以它不会触发
太棒了，成功了！他们付给你们的钱不够！感谢您的帮助
@user2697629 如果您的问题得到解决，请接受您认为符合您要求的答案。
他们根本不付钱给我们，这就是为什么接受答案很重要

【解决方案2】：

您遇到的元素弹跳三次的行为是因为动画队列建立在每个 mouseenter 事件上，您可以通过调用 .stop(true,true) 来结束当前动画并在每次效果开始时清除队列来防止这种情况：

$(function(){
     $('#myimage').mouseenter(function() {
         $(this).stop(true,true).effect('bounce',500,function(){
             $(this).css('top',0);
         });
    });
});

Demo fiddle

【讨论】：

试一试，出于某种奇怪的原因，它会使按钮停在比原来高一点的位置，如果鼠标反复越过它们，它们最终会完全浮出屏幕！
@user2697629 我更新了我的答案以包含对该问题的修复。请注意，停止动画的逻辑是正确的，只是这种特殊的反弹效果与一些定位属性混淆了
这仍然会使按钮在您悬停时立即弹跳，超时方式是最好的，这样您就不会在鼠标在页面上或通过导航项移动时得到一堆随机弹跳
@Huangism 我知道，这只是克服不良影响的不同解决方案，我认为这是动画队列建立的事实
@koala_dev 理解为您的解决方案可以做到这一点:)