延迟jquery悬停事件？

Posted 2023-02-19

【中文标题】延迟jquery悬停事件？

【英文标题】：Delay jquery hover event?

【发布时间】：2010-09-30 22:44:01

【问题描述】：

我想延迟 jquery 中的悬停事件。当用户将鼠标悬停在链接或标签上时，我正在读取文件。如果用户只是在屏幕上移动鼠标，我不希望此事件立即发生。有没有办法延迟事件触发？

谢谢。

示例代码：

$(function() 
    $('#container a').hover(function() 
        $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
            filename:'file.txt',
            function() 
                $(this).appendTo('#info');
            
         );
    ,
        function()  $('#info').remove(); 
    );
);

更新： (1/14/09) 添加 HoverIntent 插件后，将上面的代码更改为以下代码以实现它。实现起来非常简单。

$(function() 
    hiConfig = 
        sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)
        interval: 200, // number = milliseconds for onMouseOver polling interval
        timeout: 200, // number = milliseconds delay before onMouseOut
        over: function() 
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx', filename:'file.txt',
                function() 
                   $(this).appendTo('#info');
                
             );
        , // function = onMouseOver callback (REQUIRED)
        out: function()  $('#info').remove();   // function = onMouseOut callback (REQUIRED)
    
    $('#container a').hoverIntent(hiConfig)

【问题讨论】：

感谢您提供使用 hoverIntent

【参考方案1】：

为 jquery 使用 hoverIntent 插件：http://cherne.net/brian/resources/jquery.hoverIntent.html

它非常适合您所描述的内容，我几乎在每个需要鼠标悬停激活菜单等的项目中都使用过它......

这种方法有一个问题，一些界面没有“悬停”状态，例如。移动浏览器，例如 iphone 上的 safari。您可能隐藏了界面或导航的重要部分，而无法在此类设备上打开它。您可以使用特定于设备的 CSS 来解决这个问题。

【讨论】：

或者这个插件也像一个魅力github.com/john-terenzio/jQuery-Hover-Delay

【参考方案2】：

您需要在悬停时检查计时器。如果它不存在（即这是第一次悬停），则创建它。如果它存在（即这不是第一次悬停），杀死它并重新启动它。将计时器有效负载设置为您的代码。

$(function() 
    var timer;

    $('#container a').hover(function() 
        if(timer) 
            clearTimeout(timer);
            timer = null
        
        timer = setTimeout(function() 
            $('<div id="fileinfo" />').load('ReadTextFileX.aspx',
                filename:'file.txt',
                function() 
                    $(this).appendTo('#info');
                
            );
        , 500)
    ,
    // mouse out
    );
);

我敢打赌 jQuery 有一个函数可以为你完成这一切。

编辑：是的，jQuery plugin to the rescue

【讨论】：

感谢非插件解决方案！

我添加了一个 clearTimeout(timer);计时器=空；在 mouseout 方面，但效果很好并且避免了 YAP（另一个插件）

@Andiih 很棒的电话，感谢您向我介绍“YAP”的首字母缩写词。

你可能是说 debounce()

【参考方案3】：

完全同意 hoverIntent 是最好的解决方案，但如果你碰巧是一个不幸的草皮，他在一个网站上工作，需要一个漫长而漫长的 jQuery 插件审批流程，这里有一个快速而肮脏的解决方案，对我来说效果很好：

$('li.contracted').hover(function () 
    var expanding = $(this);
    var timer = window.setTimeout(function () 
        expanding.data('timerid', null);

            ... do stuff

    , 300);
    //store ID of newly created timer in DOM object
    expanding.data('timerid', timer);
, function () 
    var timerid = $(this).data('timerid');
    if (timerid != null) 
        //mouse out, didn't timeout. Kill previously started timer
        window.clearTimeout(timerid);
    
);

如果鼠标在其上停留的时间超过 300 毫秒，这个只是用于扩展

。

【讨论】：

谢谢，发现这比其他答案更有用。

【参考方案4】：

您可以在 mouseout 事件上使用 setTimeout() 调用和 clearTimeout()。

【参考方案5】：

在 2016 年，Crescent Fresh 的解决方案对我来说没有按预期工作，所以我想出了这个：

$(selector).hover(function() 
    hovered = true;
    setTimeout(function() 
        if(hovered) 
            //do stuff
        
    , 300); //you can pass references as 3rd, 4th etc. arguments after the delay

, function() 
    hovered = false;
);

【参考方案6】：

我的解决方案很简单。如果用户在 obj 上保持 mouseenter 超过 300 毫秒，则延迟打开菜单：

var sleep = 0;
$('#category li').mouseenter(function() 
    sleep = 1;
    $('#category li').mouseleave(function() 
        sleep = 0;
    );
    var ob = $(this);
    setTimeout(function()                          
        if(sleep) 
            // [...] Example:
            $('#'+ob.attr('rel')).show();
        
    , 300);
);