title: Cancel AJAX request if new one submitted
body: <p><strong>Background:</strong> When user clicks a <code>button</code> its class is toggled between <code>class1</code> and <code>class2</code> and this data is submitted via <code>AJAX</code>. To confirm this data is saved, server responds with <code>js</code> (updates button <code>HTML</code>). </p>
  
  <p><strong>The Problem:</strong> if a user hits the button faster than the server can respond (ie hits the button quickly), the button will toggle back and forth once the server responses actually arrive:</p>
  
  <ol>
  <li>User hits button, changes to <code>class2</code> via js (AJAX submitted)</li>
  <li>User hits button, changes to <code>class1</code> via js (AJAX submitted)</li>
  <li>Server responds to first AJAX request, and refreshes html to <code>class2</code></li>
  <li>Server responds to second AJAX request, and refreshes html to <code>class1</code></li>
  </ol>
  
  <p>How could the ajax request be cancelled, if a new one is made?</p>
  
  <pre><code>$('.button').click(function() {
      $('this').toggleClass('class1 class2')
      // submit ajax request
      $.ajax({
          url: '/update_link'
      })
  });
  </code></pre>