为什么 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 毫秒后，应该将“活动”类添加到悬停的“li”标签中。如果未悬停 X 毫秒或更长时间，则不会添加“活动”。而且，如果添加了“活动”，则在鼠标离开时，应删除“活动”类。

非常感谢任何帮助。

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/