setTimeout的Jquery效果
setTimeout的Jquery效果
提问于 2012-02-10 18:12:52
好吧，我肯定我在这里遗漏了一些基本的东西！但是为了我的生活，我不能解决它。
场景
这是一个简单的隐藏显示菜单；
// Setup hover
var fadeDuration = 200;
var setDelay;
$level1Item.hover(function () {
$(this).addClass('hover').find('.level-2').fadeIn(fadeDuration);
}, function () {
$(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});而且它工作得很好。但是下拉列表是相当大的，当它弹出来的时候会让人恼火，当你的鼠标从屏幕的顶部移动到底部时，这一切都是非常性感的。
所以我想设置一个超时时间，并在鼠标输出时清除它...
// Setup hover
var fadeDuration = 200;
var setDelay;
$level1Item.hover(function () {
setDelay = setTimeout("$(this).addClass('hover').find('.level-2').fadeIn(200)", 500);
//$(this).addClass('hover').find('.level-2').fadeIn(fadeDuration);
}, function () {
clearTimeout(setDelay);
$(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});绝对什么都没发生！！我已经在超时功能中尝试过警报，它们起作用了…最初，变量fadeDuration是未定义的，但是一个数字可以停止控制台错误。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-02-10 18:17:46
您不能在setTimeout-code中使用this，因为this依赖于上下文。因此，当超时触发时，this是一个不同的this...英语很差，但希望这是有意义的。
此外，请避免在计时器中使用字符串，而应使用函数。虽然您可以使用字符串，然后将其计算为JavaScript，但与简单地将相同的代码包装在一个函数中相比，这通常是一种糟糕的形式
var fadeDuration = 200;
var setDelay;
$level1Item.hover(function () {
var element = $(this);
setDelay = setTimeout(function() {
element.addClass('hover').find('.level-2').fadeIn(fadeDuration);
}, 500);
}, function () {
clearTimeout(setDelay);
$(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});Stack Overflow用户
发布于 2012-02-10 18:15:43
尝试修改setTimeout调用以使用匿名函数：
// Setup hover
var fadeDuration = 200;
var setDelay;
var $item;
$level1Item.hover(function () {
$item = $(this);
setDelay = setTimeout(function() {
$item.addClass('hover').find('.level-2').fadeIn(200)
}, 500);
},
function () {
clearTimeout(setDelay);
$(this).removeClass('hover').find('.level-2').fadeOut(fadeDuration);
});Stack Overflow用户
发布于 2012-02-10 18:16:57
当您传递给setTimeout的字符串是eval()ed时，this是window，而不是您期望的任何对象。
不要将字符串传递给setTimeout，并且要注意保留this的值。
var self = this;
setDelay = setTimeout(function () {
$(self).addClass('hover').find('.level-2').fadeIn(200);
}, 500);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9226085
复制相关文章
相似问题
腾讯云开发者
