Cancel AJAX request if new one submitted
<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>