Question

所以我在悬停时出现了一个下拉导航，我试图在那里延迟以提高可用性。最初我使用的是hoverIntent，除了IE8及以下版本以外，它在任何地方都能很好地工作。

所以我试图用普通的旧Javascript来做延迟，但是setTimeout函数不会调用我的jQuery。

var J = jQuery.noConflict（）;

 J(".navigation li").hover(function(){J(this).addClass("hover");},function(){setTimeout("J(this).removeClass('hover');",500);});

当我这样设置时：

 function off(){J(this).removeClass("hover"); alert("hello");}


J(".navigation li").hover(function(){J(this).addClass("hover");},function(){setTimeout("off()",500);});

警报完美但不是.removeClass函数。

我错过了什么吗？

Answer 1

this内的

setTimeout不是li元素;我建议你使用接收函数的setTimeout重载，并在将变量设置为this之前保留一个引用：

J(".navigation li").hover(function(){
   J(this).addClass("hover");
},
function(){
  var self = this;
  setTimeout(function() {
         J(self).removeClass('hover');
  },500);
});

Answer 2

您的off功能：

function off() {
    J(this).removeClass("hover");
    alert("hello")
}

在this调用时，

没有正确的setTimeout()变量 - 在大多数（所有？）浏览器中，它将this设置为window。

您需要一个额外的闭包来包装原始this并将其传递给该计时器函数：

J(".navigation li").hover(
    function() {
        J(this).addClass("hover");
    },
    function() {
        var that = this;
        setTimeout(function() {
            off.apply(that);
        }, 500);
    }
);

注意：不要将字符串参数用于setTimeout()！

Answer 3

问题是this指的是超时回调范围内的不同内容。

最简单的解决方案是使用jQuery.proxy([function],[scope])

提供旧范围

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script>
            var f = function(){
                console.log(this.id);
            };

            $(function() {
                $("div").click(function () {
                    setTimeout($.proxy(f,this), 1000);
                });
            });
        </script>
    </head>
    <body>
        <div id="a">a</div>
        <div id="b">b</div>
    </body>
</html>

Jquery .removeClass在setTimeout中不起作用

3 个答案: