Jquery 与 setTimeout 的效果

Question

好吧，我确信我在这里遗漏了一些基本的东西！但我一生都无法解决这个问题。

场景

这是一个简单的隐藏显示菜单；

// 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 未定义，但一个数字停止了控制台错误。

Answer 1

尝试修改 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);
});

Answer 2

当您传递给 setTimeout 的字符串被 eval()ed 时，this 是 window 而不是您的任何对象期待。

不要将字符串传递给 setTimeout，并小心保留 this 的值。

var self = this;
setDelay = setTimeout(function () { 
                          $(self).addClass('hover').find('.level-2').fadeIn(200);
                      }, 500);

Answer 3

您不能在 setTimeout 代码中使用 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);
});