为什么 setTimeout 不适用于 .hover()

Question

JSFIDDLE： http://jsfiddle.net/yL1uu0hv/

我正在尝试使用 setTimeout 创建一个简单的悬停意图。我不确定提供的代码有什么问题。如果我注释掉hovertimer = setTimeout(function(){并}, 500);那么我正在使用的 addClass 就可以工作了。如果上述项处于活动状态（未注释掉），则 addClass 不起作用。

由于$('ul#megamenulist li').each($(this).addClass(opts.mmactiveclass.mmclassname));的语法，我也遇到了某种错误，即使什么都不做，它也一直在冒泡。

应该发生的是，在将鼠标悬停在项目上 X 毫秒后，类"active"应该被添加到悬停的"li"标签中。如果未悬停 X 毫秒或更长时间，则不会添加"活动"。并且，如果添加了"活动"，则在鼠标离开时应删除类"active"。

任何帮助将不胜感激。

jQuery(document).ready(function($){
        $('ul#megamenulist li').hover(
            function(){
                console.log('over');
                //hovertimer = setTimeout(function(){
                    $('ul#megamenulist li').each($(this).addClass('active'));
                //}, 500);
            },
            function(){
                console.log('off');
                clearTimeout(hovertimer);
                $('ul#megamenulist li').removeClass('active');
            }
        );
});

<div id="megamenunav">
    <ul id="megamenulist">
        <li>
            <a href="#"><span>Explore</span></a>
        </li>
        <li>
            <a href="#"><span>Develop</span></a>
        </li>
        <li>
            <a href="#"><span>Engage</span></a>
        </li>
        <li>
            <a href="#"><span>Shop</span></a>
        </li>
        <li>
            <a href="#"><span>About</span></a>
        </li>
    </ul>
</div>

Answer 1

问题是函数内部setTimeout上下文（this关键字）是全局window对象。最简单的解决方法是在变量中保存对ul#megamenulist li元素的引用，并在setTimeout中使用它。

正确的代码：

var $li = $('ul#megamenulist li').hover(
    function () {
        var self = this;
        hovertimer = setTimeout(function(){
            $(self).addClass('active');
        }, 500);
    },
    function () {
        clearTimeout(hovertimer);
        $li.removeClass('active');
    }
);

此外，缓存 jQuery 集合以避免重复的 DOM 查询也是一种很好的做法。例如，您可以像上面的代码一样缓存它，因为hover返回一个集合。

演示：http://jsfiddle.net/yL1uu0hv/2/