CODEWITHSUNDEEP
javascriptjquery
vivek
vivek

Reputation: 2004

settimeout not getting cleared

What I'm trying to do is, when the page loads a box appears after 3 seconds and if nothing happens, it gets partially hidden after 3 seconds. Now if the cursor enters the box, timeout is cleared and the ad won't be getting hidden as I'm clearing the timeout.

The problem is when the mouse leaves and enters again, the previous timeout is still there. Though I'm trying to clear the timeout but it still hides the box. What can be the problem?

See my code: (JSfiddle link: 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');
}

Upvotes: 1

Views: 1425

Answers (2)

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

try removing the var in front of pstimer.

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

using var defines a new local-variable that shares the name with your intended pstimer, but is only available within this function call. When the function is complete, the local var is destroyed.

Upvotes: 2

Shmiddty
Shmiddty

Reputation: 13967

$("#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);
    }
);

Upvotes: 2

Related Questions