Jquery .removeClass 在 setTimeout 内不起作用
Posted
技术标签:
【中文标题】Jquery .removeClass 在 setTimeout 内不起作用【英文标题】：Jquery .removeClass not working inside setTimeout 【发布时间】：2012-05-06 07:08:56 【问题描述】：所以我有一个出现在悬停时的下拉导航，我试图在那里延迟以提高可用性。最初我使用的 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 函数却不行。
我错过了什么吗？
【问题讨论】：
“off()”函数中this 的值将不是您需要的值。
【参考方案1】：
setTimeout里面的this不是li元素；我建议您使用接收函数的 setTimeout 重载，然后将变量设置为 this 以保留引用：
J(".navigation li").hover(function()
J(this).addClass("hover");
,
function()
var self = this;
setTimeout(function()
J(self).removeClass('hover');
,500);
);
【讨论】：
【参考方案2】：您的off 函数：
function off()
J(this).removeClass("hover");
alert("hello")
当setTimeout() 调用时，不会有正确的this 变量 - 在大多数（所有？）浏览器上它将this 设置为window。
您需要一个额外的闭包来包装原始的 this 并将其传递给该计时器函数：
J(".navigation li").hover(
function()
J(this).addClass("hover");
,
function()
var that = this;
setTimeout(function()
off.apply(that);
, 500);
);
注意：不要对setTimeout() 使用字符串参数！
【讨论】：
【参考方案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 内不起作用的主要内容，如果未能解决你的问题，请参考以下文章
在 Jquery 中动画 addClass 和 removeClass
jQuery的addClass,removeClass和toggleClass方法