延迟jquery悬停事件？

Question

延迟jquery悬停事件？

我想在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)}

Answer 1

您需要在悬停时检查计时器。如果它不存在（即这是第一个悬停），请创建它。如果它存在（即这不是第一个悬停），请将其删除并重新启动它。将计时器有效负载设置为您的代码。$(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;timer; &nbsp;&nbsp;&nbsp;&nbsp;$('#container&nbsp;a').hover(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if(timer)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearTimeout(timer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timer&nbsp;=&nbsp;null &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timer&nbsp;=&nbsp;setTimeout(function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<div&nbsp;id="fileinfo"&nbsp;/>').load('ReadTextFileX.aspx', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{filename:'file.txt'}, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).appendTo('#info'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;500) &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;mouse&nbsp;out &nbsp;&nbsp;&nbsp;&nbsp;});});我敢打赌jQuery有一个功能可以为你完成这一切。

Answer 2

完全同意hoverIntent是最好的解决方案，但如果你碰巧是一个不幸的草皮，他在一个网站上工作，有一个漫长而漫长的过程来批准jQuery插件，这里有一个快速而肮脏的解决方案，对我来说很有用：$('li.contracted').hover(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;expanding&nbsp;=&nbsp;$(this); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;timer&nbsp;=&nbsp;window.setTimeout(function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;expanding.data('timerid',&nbsp;null); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;...&nbsp;do&nbsp;stuff&nbsp;&nbsp;&nbsp;&nbsp;},&nbsp;300); &nbsp;&nbsp;&nbsp;&nbsp;//store&nbsp;ID&nbsp;of&nbsp;newly&nbsp;created&nbsp;timer&nbsp;in&nbsp;DOM&nbsp;object &nbsp;&nbsp;&nbsp;&nbsp;expanding.data('timerid',&nbsp;timer);},&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;timerid&nbsp;=&nbsp;$(this).data('timerid'); &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(timerid&nbsp;!=&nbsp;null)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//mouse&nbsp;out,&nbsp;didn't&nbsp;timeout.&nbsp;Kill&nbsp;previously&nbsp;started&nbsp;timer &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.clearTimeout(timerid); &nbsp;&nbsp;&nbsp;&nbsp;}});这个只是用于扩展<li>如果鼠标已经超过300毫秒。