jQuery 设置超时答案

【问题标题】：jQuery setTimeoutjQuery 设置超时
【发布时间】：2011-12-22 22:08:40
【问题描述】：

我想在此工具提示代码中添加一个超时，以便它仅在鼠标悬停在它上面一段时间而不是立即显示时才显示...我尝试添加 setTimeout() 但我不知道如何使用clearTimeout() 所以工具提示不会在鼠标移出时隐藏。你能帮忙吗？

// -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
    $('.mcTxb').mousemove(function(e) {
        var mcHoverText = $(this).attr('alt');
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).text(mcHoverText).show('fast');
        $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
    }).mouseout(function() {
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).hide('fast');
    });
}
mcTooltip();

我试过了：

    // -----------------------------------------------
// TOOLTIP MOUSE HOVER
// -----------------------------------------------
function mcTooltip() {
    $('.mcTxb').mousemove(function(e) {
        var mcHoverText = $(this).attr('alt');
        var mcTooltip = $('.mcTooltip');
        setTimeOut(function(){
            $(mcTooltip).text(mcHoverText).show('fast');
        }, 300);
        $(mcTooltip).css('top', e.clientY + 10).css('left', e.clientX + 10);
    }).mouseout(function() {
        var mcTooltip = $('.mcTooltip');
        $(mcTooltip).hide('fast');
    });
}
mcTooltip();

【问题讨论】：

为什么不直接删除“mouseout”回调？
向我们展示您尝试使用setTimeout/clearTimeout。

标签： jquery settimeout

【解决方案1】：

当您使用动画时，您可以使用.delay() 来延迟工具提示的出现：

$(mcTooltip).text(mcHoverText).delay(1000).show('fast');

在您的mouseout 函数中，使用.stop 取消任何现有的延迟或动画，然后隐藏工具提示：

$(mcTooltip).stop(true).hide('fast');

【讨论】：

【解决方案2】：

var my_timer;
$('.mcTxb').hover(
    function () {
        my_timer = setTimeout(function () {
            //do work here
        }, 500);
    },
    function () {
        clearTimeout(my_timer);
    }
);

当你 mouseover 元素和 whatever 将不会发生，如果你在半秒内mouseout，这将等待半秒后再做 whatever。

【讨论】：

【解决方案3】：

一种选择是使用hoverIntent 插件来完成你想要的。

【讨论】：

【解决方案4】：

改用hover()，代码更少（这总是好的，IMO）。

像这样：

function mcToolTip() {
    $(".mcTxb").hover(function(){
        // mouseover stuff here
        $("element").delay(3000).show(); // 3 second delay, then show
    }, function(){
        // mouseout stuff here
    });
}

【讨论】：

【解决方案5】：

这个问题很老了，但我想我是为别人回答的。超时不起作用的主要原因是 "setTimeOut" 的情况。你不能驼峰驼峰 Out 部分。它的“设置超时”。

【讨论】：

【解决方案6】：

setTimeout 在鼠标悬停或悬停时不起作用。使用 .delay() 是安全的。

setTimeout(function(){
    $(mcTooltip).text(mcHoverText).show('fast');
}, 300);

// use this instead.

$(mcTooltip).text(mcHoverText).delay(3000).show('fast');

【讨论】：