为什么setTimeout不能与.hover（）一起使用？

Question

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

我尝试使用setTimeout创建一个简单的hoverintent。我不确定提供的代码有什么问题。如果我发表评论hovertimer = setTimeout(function(){和}, 500);，那么addClass I＆＃39; m使用作品。如果上述项目处于活动状态（未注释掉），则addClass不起作用。

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

应该发生的事情是，在将X毫秒悬停在该项目上之后，该课程“活跃”了。应该被添加到悬停的＆＃39; li＆＃39;标签。如果没有悬停超过X毫秒或更长时间，那么“活跃”＆＃39;没有添加。并且，如果“活跃”＆＃39;添加，在mouseleave上课程活跃＆＃39;应该删除。

非常感谢任何帮助。

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/