click（）和setTimeout问题

Question

I have a message panel at the bottom of my page which I display by applying a negative margin. When it opens, I would like it to either (whichever first):

1. Close when user clicks on #panel-close (this is on the panel, so only visible when it is open)

   OR

2. Close after 6 seconds

The code I have works until I start opening and closing it repeatedly - then the timing goes wrong. I believe I need to cancel the setTimeout if i have closed the panel with a click, but i can't get this to work.

$("#button").click(function() {
    messagePanel.animate({
        marginTop: '-50px' //open
    }, 600 );

    setTimeout(function(){
        messagePanel.animate({
            marginTop: '0px' //close
        }, 600 );
    },6000)

});

$('#panel-close').click(function() {
    messagePanel.animate({
        marginTop: '0px' //close
    }, 600 );
});

Any help appreciated!

Answer 1

If you need to cancel the setTimeout event, you need to get the timeoutID return by setTimeout function, eg.

var timeoutId;
timeoutId = setTimeout(function () {...});
$('#panel').click(function() {
   clearTimeout(timeoutId);
}

see https://developer.mozilla.org/en/DOM/window.clearTimeout for more detail