Cancel or Abort Jquery AJAX request

Today i came across a challenging issue where in  i need to manage the diamond search on various criteria

It has around 6 different categories with various options say shape, carat, color,symmetry, polish etc


The current functionality is that when u select any one of the parameters then it  should search for the combination of the diamonds from around 90,000 diamonds and bring down the best matched diamonds by running the

search filtering algorithm in the background.


Now the client want the quick click the various options one after the other and the result should be latest


My current ajax requests was queued one after other and when user stop clicking various options it started displaying the results one after the other, so in 4-5 seconds the result set changed number of times giving a false impression to the user


Now the challenge is to ignore all the previous requests and take into consideration the latest one and show the results on that search parameters


This time also StackOverflow helped me a lot finding out the perfect solution


It used a simple logic of readyState property of ajax request, If the readyState property is not 4 that means the request is still in progress, so next time when i call the same ajax function with different parameters at that time it checks for the existing requests if any in progress and kiss that request via abort() method that came for XMLHTTP object

My new function will now look  like as follows

var xhr; // global object

function diamondsearch() {
    var fn = function(){
        if(xhr && xhr.readystate != 4){
        xhr = $.ajax({
            url: 'ajax/diamondsearch.php',
            success: function(data) {
                //do something interesting for search and bring down the results
so next time when i call the same diamond request with different and previous one is still active then it will abort that previous one and start a new one.