0

所以我有一个出现在悬停时的下拉导航，我试图在那里延迟以提高可用性。最初我使用的 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 函数却不行。

我错过了什么吗？

4

3 回答 3

8

thisinsidesetTimeout不是 li 元素；我建议您使用接收函数的 setTimeout 重载，并在设置变量this以保留引用之前：

J(".navigation li").hover(function(){
   J(this).addClass("hover");
},
function(){
  var self = this;
  setTimeout(function() {
         J(self).removeClass('hover');
  },500);
});
于 2012-04-25T15:11:56.893 回答
1

你的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()！

于 2012-04-25T15:11:56.917 回答
0

问题在于它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>
于 2012-04-25T15:18:39.543 回答