How to extend delay for slide toggle without repeating effect?

Question

I want to make it so that when a button is clicked a hidden div is displayed for a few seconds and hidden again. This code accomplishes that:

HTML:

<button class="clicky">click me</button>

<div class="flashy" style="display: none; width: 150px; font-size: 18px; margin-top: 25px;">
    Now you see me!
</div>

JS:

jQuery(".clicky").on("click", function() {
    flashDiv();
});

function flashDiv()
{
    $(".flashy").slideToggle(100).effect("highlight", 300).delay(4000).slideToggle(100);
}

JSFIDDLE: http://jsfiddle.net/NRz34/1/

However, there's one thing that I really don't like about it: if you click the button multiple times in quick succession, the effect will repeat over and over again (i.e. it will slide down, display for a few seconds, slide up, then repeat however many times you clicked the button).

My question is, how can this be modified so that instead of sliding up and down over and over again (for however many times it was clicked), it just stays down for 4 seconds after the last click?

Example:

Current behavior when clicked multiple times:

1. click click click
2. slides down
3. displays for 4 seconds
4. slides up
5. repeats two more times

Desired behavior when clicked multiple times:

1. click click click
2. slides down
3. displays for 4 seconds
4. slides up

Note:

I realize that I could check if the DIV is visible and ignore the button press if it is, but this isn't quite the behavior I'm wanting. You see, I want the DIV to stay visible for 4 seconds after the last button press, so if the button is pressed and then is pressed again 2 seconds later, the button should stay visible for 4 more seconds (for a total display time of 6 seconds).

Answer 1

Simply add .stop(true) to the beginning of your call. This will stop any current animation and clear out the animation queue, and start again. Also, use slideDown/slideUp so you don't end up in an undetermined state. If you click when it is already shown, slideDown() won't do anything, and then 4000ms will be added from that time until the slideUp().

function flashDiv()
{
    $(".flashy").stop(true).slideDown(100).effect("highlight", 300).delay(4000).slideUp(100);
}

JSFiddle Demo

EDIT: I have learned that .delay() and .stop() do not play nice together, as referenced in the doumentation (http://api.jquery.com/delay/).

To get around this, you can use .animate() with a useless animation, such as animating the width to the current width value. Also, stopping the animation can cause the highlight effect to get stuck, so I clear the background-color at the beginning of the call:

function flashDiv()
{
    $(".flashy").css('background-color', 'transparent').stop(true).slideDown(100).effect('highlight', 300).animate({'width':150}, 4000).slideUp(100);
}

JSFiddle Demo