title: How to clear setTimeout() and jQuery fadeOut() before either are done?
body: <p>I have this showMessage function:</p>
  
  <pre>function showMessage(message) {
      $('#my_message').show();
      $('#my_message').html(message);
      setTimeout(function(){$('#my_message').fadeOut();},
          2000);
  }</pre>
  
  <p>But it doesn't work correctly if it's called again before the setTimeout() and/or the fadeOut() have completed. 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?</p>
  
  <p>edit:</p>
  
  <p>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:</p>
  
  <pre>$(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();
  }</pre>
  
  <p>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 <code>stop(true)</code> and <code>stop('fx', true)</code> but neither seemed to have any effect.</p>