jQuery 设置超时

jQuery setTimeout

提问by user1002039

I'd like to add a timeout to this tooltip code so it only displays if the mouse hovers over it after a while rather than immediately... I tried adding the setTimeout()but I could not figure out how to use the clearTimeout()so the tooltip does not hide on mouseout. Can you help?

我想为这个工具提示代码添加一个超时，这样它只会在鼠标悬停在它上面一段时间而不是立即显示时显示......我尝试添加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();

I tried this:

我试过这个：

    // -----------------------------------------------
// 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();

回答by Alnitak

As you're using animation, you can use .delay()to defer the appearance of your tooltip:

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

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

In your mouseoutfunction, use .stopto cancel any existing delays or animations, and then hide the tooltip:

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

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

回答by Jasper

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

This will wait half a second before doing whateverwhen you mouseoverthe element and the whateverwill not happen if you mouseoutwithin the half second.

这将做之前等待半秒，无论当你mouseover的元素和任何你会不会发生mouseout在半秒之内。

回答by Jasper

One option is to use the hoverIntentplugin to accomplish what you want.

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

回答by Purag

1. Use hover()instead, it's less code (and that's always good, IMO).

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

Like so:

像这样：

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

回答by JSV

This question is old, but I thought I answer it for others. The main reason the timeout was not working was the case of "setTimeOut" . You cant camel hump the Out part. Its "setTimeout".

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

回答by Anthony Carbon

setTimeoutis does not work on mouseover or hover. It is safe to use .delay().

setTimeout不适用于鼠标悬停或悬停。使用 .delay() 是安全的。

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

// use this instead.

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