javascript - 如何防止队列建立 jQuery

Question

我试图让导航栏只在鼠标移动或窗口滚动时出现。它应该出现 3 秒然后消失。这行得通，但是对于我的鼠标或窗口移动的每个像素，它都会添加淡入淡出然后再次淡出到队列的功能，并且随着 jQuery 动画延迟，它一遍又一遍地执行此操作，本质上使导航闪烁 3秒永远。有没有办法使用 .clearQueue() 方法来防止这种情况发生，或者有其他更有效的方法吗？

html:

<div id="gallery"></div>

<div id="control">

    <div id="previous-button" class="button"></div>
    <div id="next-button" class="button"></div>

</div>

jQuery:

    t = 300;

    function cBar() {
        $("#control").fadeIn(t);
        $("#control").delay(t*10).fadeOut(t);
    }

    $(window).scroll(function() {
        console.log("scroll");
        cBar();
    });
    $(window).mousemove(function() {
        console.log("mouse");
        cBar();
    });

Answer 1

将 setTimeout() 函数与存储计时器的变量一起使用:

t = 300;
var timer;

function cBar() {
    if( timer ){
        clearTimeout(timer);
    }
    $("#control").fadeIn(t);

    timer = setTimeout(function(){
        $("#control").fadeOut(t);
        timer = null;
    }, t*10);
}

$(window).scroll(function() {
    console.log("scroll");
    cBar();
});
$(window).mousemove(function() {
    console.log("mouse");
    cBar();
});