如何避免鼠标事件与定时器冲突

Question

我的目标是将一个元素悬停在网页上，在本例中为 li 标签，从而导致主图像与备用图像交换。当鼠标悬停在 li 标签上时，替代图像将可见。备用图像将在鼠标离开 li 标签后保持可见 n 秒。在 n 秒后备用图像交换回主图像之前，不会再次触发初始悬停动作。

到目前为止，我的搜索结果是： Detect IF hovering over element with jQuery。我从 Meligy 分叉了 jsfiddle 想出了这个：

var $sample = $("#sample");
var $main = $("#main");
var $alt = $("#alt");

$alt.hide();

setInterval(function () {
    if ($sample.is(":hover")) {
        $main.hide();
        $alt.show();
    } else {
        setInterval(function(){
            $alt.hide();
            $main.show();
        },3000);
    }
}, 200);

此外，jQuery on hover animation fires multiple times 并使用 FC 的 jsfiddle 得到的结果恰好非常接近。

var $hover = $("#hover");
var $main = $("#main");
var $alt = $("#alt");

$alt.hide();

$hover.hover(

function () {
    $alt.stop(true, true).show();
    $main.stop(true, true).hide();
},

function () {
    $main.stop(true, true).show(2000);
    $alt.stop(true, true).hide(2000);
});

到目前为止，我拥有的最近的东西在下面但经过几次悬停后，图像无法控制地来回摆动。

var $hover = $("#hover");
var $main = $("#main");
var $alt = $("#alt");

$alt.hide();


$hover.hover(function () {
    if ($main.is(":visible")) {
        $main.hide();
        $alt.show();
    }
}, function () {
    setInterval(function () {

        // Also attempted $main.is(":hidden")

        if ($main.not(":visible")){
            $alt.hide();
            $main.show();
        }
    }, 3000);
});

谢谢大家

Answer 1

使用超时来避免这种行为。原因是，无论悬停如何，都会触发一个间隔（超时）。如果 leave/reenter 元素，则必须取消运行 timeout/interval。出于测试目的，我对您的代码进行了一些编辑：

var timer = null;

$hover.on('mouseenter', function () {
    if (window.timer != null)
        clearTimeout(window.timer);

        $main.hide();
        $alt.show();
});

$hover.on('mouseout', function () {
    window.timer = setTimeout(function () {
        // Also attempted $main.is(":hidden")
        $alt.hide();
        $main.show();
    }, 3000);
});

更新后的fiddle：https://jsfiddle.net/m18voLeL/5/

如何避免鼠标事件与定时器冲突

how to avoid mouse event conflict with timer

jquery

hover

mouseevent

setinterval