jquery - 我想在 mouseenter 时取消之前的 setTimeout() 调用，但我不明白为什么 jQuery 不允许我这样做？

Question

这是我的代码：

$(".pc2").hover(function(){

        $('#pc1').show();
        $('#pc1a').show(800);
    },
    function(){
        $('#pc1').hide();
        setTimeout(function(){$('#pc1a').hide();}, 5000);
        $('#pc1a').mouseenter(function(){
        clearTimeout(function(){$('#pc1a').show();}); 
        });
        $('#pc1a').mouseleave(function(){
            $('#pc1a').hide(800);
        });
    });

我想要的是 $('pc1a') div 停留（以便 setTimeout( hide()) 不会被调用）一旦用户将鼠标浮动到 div 中。这似乎有一个使用 stop() 的简单解决方案；，清除超时（）；或清除队列（）；但我不确定如何根据我的情况正确调用这些方法。你能告诉我并帮助我找到解决方案吗？

先感谢您

Answer 1

clearTimeout接受以前的计时器句柄，而不是函数。保存 的返回值setTimeout，稍后使用该值取消它。

例如：

$(".pc2").hover(
    function () {
        $('#pc1').show();
        $('#pc1a').show(800);
    },
    function () {
        var timer;

        $('#pc1').hide();
        timer = setTimeout(function () {     // <== Save it
            $('#pc1a').hide();
        }, 5000);
        $('#pc1a').mouseenter(function () {
            clearTimeout(timer);             // <== Cancel it
        });
        $('#pc1a').mouseleave(function () {
            $('#pc1a').hide(800);
        });
    }
);

Answer 2

您需要clearTimeout通过 id 调用，试试这个（*已更新）

$(".pc2").hover(function() {
        $('#pc1').show();
        $('#pc1a').show(800);
    },
    function() {
        var timeoutId;
        $('#pc1').hide();
        timeoutId = setTimeout(function(){$('#pc1a').hide();}, 5000);
        $('#pc1a').mouseenter(function(){
            clearTimeout(timeoutId); 
        });
        $('#pc1a').mouseleave(function(){
            $('#pc1a').hide(800);
        });
    }
);