title: On click myFunction and wait until it is finished
body: <p>I thought this is something easy to do but I dont find anything helping me out of this.</p>
  
  <p>I have a function</p>
  
  <pre><code>(function($){
      myFunction = function(e){
          e.preventDefault();
          // do stuff
          // load ajax content
          // animate and show
      }
      $('.button').on( 'click', myFunction);
  })(jQuery);
  </code></pre>
  
  <p>now this works but I need to know, wait untill everything is done if someone presses many <code>.button</code>s in a short time cause there are a few elements with class <code>button</code></p>
  
  <p>I've tried with promise() </p>
  
  <pre><code>$('.button').on( 'click', function(){
      $.when( myFunction() ).done(function() {
          alert('finished')
      });
  });
  </code></pre>
  
  <p>but that gives me an error <code>e is undefined</code> and </p>
  
  <pre><code>$('.button').on( 'click', myFunction).promise().done(function() {
      alert('finisehd');
  });
  </code></pre>
  
  <p>anyone knowing what I'm doing wrong and how I could do it to get it to work?</p>