方案

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()时，this为window，而不是您期望的任何对象。

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

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

Answer 3

您无法在this代码中使用setTimeout，因为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);
});

使用setTimeout进行Jquery效果

方案

3 个答案: