javascript - settimeout 没有被清除

Question

我想要做的是，当页面加载时，3 秒后出现一个框，如果没有任何反应，3 秒后它会部分隐藏。现在，如果光标进入该框，超时将被清除，并且在我清除超时时广告不会被隐藏。

问题是当鼠标离开并再次进入时，之前的超时仍然存在。尽管我正在尝试清除超时，但它仍然隐藏了该框。可能是什么问题？

查看我的代码：（JSfiddle 链接：http: //jsfiddle.net/aK9nB/）

var pstimer;

$(document).ready(function(){
    setTimeout(function(){
        showps();
        pstimer = setTimeout(function() {
                hideps();
        }, 3000);
    }, 3000);
});

$('#psclose').on('click', function(){
    $('#postsearch-container').hide();
});

$("#postsearch-container").hover(
    function () {
        console.log("enter");
        clearTimeout(pstimer);
        console.log("cleartimeout");
        showps();
    }, 
    function () {   
        console.log("leave");
        clearTimeout(pstimer);
        var pstimer = setTimeout(function(){
            hideps();
    } , 3000);
});

function showps() { 
    $("#postsearch-container").stop();
    $('#postsearch-container').animate({
        bottom: '0'
    }, 'slow');
}

function hideps() {
    $('#postsearch-container').animate({
        bottom: '-115'
    }, 'slow');
}

Answer 1

$("#postsearch-container").hover(
    function () {
        console.log("enter");
        clearTimeout(pstimer);
        console.log("cleartimeout");
        showps();
    }, 
    function () {   
        console.log("leave");
        clearTimeout(pstimer);
        pstimer = setTimeout(function(){ // remove the "var" 
            hideps();
        } , 3000);
    }
);

Answer 2

尝试删除pstimer 前面的var 。

    function () {   
        console.log("leave");
        clearTimeout(pstimer);
        /* var */ pstimer = setTimeout(function(){
            hideps();
        } , 3000);
    }

using var 定义了一个新的局部变量，它与您的预期 pstimer 共享名称，但仅在此函数调用中可用。当函数完成时，本地 var 被销毁。