I have this showMessage function:

function showMessage(message) {
    $('#my_message').show();
    $('#my_message').html(message);
    setTimeout(function(){$('#my_message').fadeOut();},
        2000);
}

But it doesn't work correctly if it's called again before the setTimeout() and/or the fadeOut() have pleted. ie. it doesn't start over again and wait 2 seconds - it stutters a bit as you can imagine. How can I clear the setTimeout and the fadeOut so it works as expected?

edit:

It was suggested to use jQuery delay() instead of setTimeout(). But I don't think delay() will work properly(on jQuery delay() doc page it says delay() can't be cancelled). Here's my updated code:

$(document).ready(function() {
    $('#my_form').submit(function() {
        $('#my_message').stop();
        $('#my_message').hide();

        $.get('/my_url',
            $('#my_form').serialize(),
            function(data) {
                showMessage(data);
            });

        return false;
    });
});

function showMessage(message) {
    $('#my_message').html(message);
    $('#my_message').show();
    $('#my_message').delay(5000).fadeOut();
}

So the message will show for 5 seconds and then fade. The problem is that the delay is never cancelled. For example if I submit the form once and get the message to show, and then wait 4 seconds and submit again, then the first delay will still be alive and thus the second delay looks like 1 second. So how can I make the delay always 5 seconds even if a delay is interrupted. I tried using stop(true) and stop('fx', true) but neither seemed to have any effect.

I have this showMessage function:

function showMessage(message) {
    $('#my_message').show();
    $('#my_message').html(message);
    setTimeout(function(){$('#my_message').fadeOut();},
        2000);
}

But it doesn't work correctly if it's called again before the setTimeout() and/or the fadeOut() have pleted. ie. it doesn't start over again and wait 2 seconds - it stutters a bit as you can imagine. How can I clear the setTimeout and the fadeOut so it works as expected?

edit:

It was suggested to use jQuery delay() instead of setTimeout(). But I don't think delay() will work properly(on jQuery delay() doc page it says delay() can't be cancelled). Here's my updated code:

$(document).ready(function() {
    $('#my_form').submit(function() {
        $('#my_message').stop();
        $('#my_message').hide();

        $.get('/my_url',
            $('#my_form').serialize(),
            function(data) {
                showMessage(data);
            });

        return false;
    });
});

function showMessage(message) {
    $('#my_message').html(message);
    $('#my_message').show();
    $('#my_message').delay(5000).fadeOut();
}

So the message will show for 5 seconds and then fade. The problem is that the delay is never cancelled. For example if I submit the form once and get the message to show, and then wait 4 seconds and submit again, then the first delay will still be alive and thus the second delay looks like 1 second. So how can I make the delay always 5 seconds even if a delay is interrupted. I tried using stop(true) and stop('fx', true) but neither seemed to have any effect.

• javascript
• jquery

2 Answers 2

Don't use setTimeout at all. Change it to delay.

$('#form_message').delay(2000).fadeOut();

This will then allow you to use jquery's stop.

$('#form_message').stop();

stop also takes optional parameters which let you decide if you want to plete the animation or simply stop where it is.

http://api.jquery./stop/

To answer your original question:

var messageTimeout;
function showMessage(message) {
    clearInterval(messageTimeout);
    $('#my_message').stop().html(message).fadeTo(100, 1);
    messageTimeout = setTimeout(function(){$('#my_message').fadeOut();}, 2000);
}