Delay ajax request by x seconds and update only the last clicked request <p>Hi all I am delaying a AJAX request by 3 seconds and then updating a div with the response. But the problem what I face is, when the user clicks on all the three links simultaneously, the requested content keeps getting updated in the div. What i am trying to do is, serve only the last clicked ajax request content, but should not abort the previous requests too. Is there any way that i can achieve it ?? Thanks in advance </p> <h2>Script</h2> <pre><code> $('.links li a').click(function(event){ event.preventDefault(); var getUrl = $(this).attr("href"); var printCall = function() { $.ajax({ url: getUrl, type: "GET", beforeSend: function() { }, error: function(request){ alert(request) }, success: function(data) { $('#graphContent').html(data); } }); }; setTimeout(printCall, 3000); }); </code></pre> <h2>HTML</h2> <pre><code>&lt;ul&gt; &lt;li&gt;&lt;a href="http://localhost/test.php"&gt;Link 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="http://localhost"&gt;Link 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="index.html"&gt;Link 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>