How to use .readyState with AJAX

Question

So I have a AJAX function which allows me to filter my WordPress posts. It works perfectly apart from say the user clicks three options quickly the first option narrows the posts down to 3, the second to 2 and the third to 1. What the user will see is 3 properties appear then 2 then 1 very quickly after the preloader has gone. When the preloader goes I don't want the user to see properties disappearing / appearing.

How can I use .readyState to check if the function is already running and if it is abort()

my js

jQuery(function($){
    $('#filters').submit(function(e){
        e.preventDefault();

        var filter = $('#filters');
        var root_dir = document.location.origin;
    
        $.ajax({
            url: ajax_url,
            data: filter.serializeArray(), // form data
            dataType: 'json',
            beforeSend:function(xhr){
                $('#properties').html("\
                    <div id='property_preloader'>\
                      <div id='gif'>\
                            <img src='http://mydomain.co.uk/wp-content/themes/dist/imgs/preloader.gif' alt='Preloader Icon'>\
                        </div>\
                    </div>"
                 );
            },
            success:function(response){
                $('#response').empty();
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");

                for(var i = 0; i < response.length; i++){
                    var status = response[i].status;
                    var flash_url;

                    if(response[i].status == "For Sale"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/forsale.svg';
                    }else if(response[i].status == "Sold"){
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sold.svg';
                    }else{
                        flash_url = root_dir + '/wp-content/themes/dist/imgs/sstc.svg';
                    }

                    var html =""+
                        "<div class='col-sm-6 col-md-4 col-lg-3 post'>" +
                            "<div class='shadowwrapper2'>" +
                                "<a href='" + response[i].permalink + "'>" +
                                    "<div class='propertywrapper'>" +
                                        "<img class='img-fluid gal_imgs' src='" + response[i].image + "' alt='alt'/>" +
                                        "<span class='second_flash'>" + response[i].second_flash + "</span>" +
                                    "</div>" +
                                    "<div class='cornerflash'><img src='" + flash_url + "' alt='corner flash'></div>" +
                                    "<div class='propertyinfo'>" +
                                        "<div class='row m-0'>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].property_type + "</div>" +
                                            "<div class='col-6 p-0 mt-2'>" + response[i].bedrooms + " bedrooms</div>" +
                                        "</div>" +
                                    "</div>" +
                                    "<div class='streetpricewrapper'>" +
                                        "<p class='streetname'>" + response[i].street + ", " + response[i].town + "</p>" +
                                        "<p class='price'>£" + response[i].price + "</p>" + 
                                    "</div>" +                    
                                "</a>" +
                            "</div>" +
                        "</div>";

                    $('#response').append(html);
                }

                crumb(); 
            },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                $('#properties').html(""+
                    "<div class='container'>"+
                        "<div class='row'><div class='col-12'><div id='crumb'></div><div id='flash_crumbs'></div></div></div>"+
                        "<div class='row' id='response'></div>"+ 
                    "</div>");
                
                var html = "<div class='col-12'><p>Sorry we found no results for your search. Please try widen your search</p></div>";
                $('#response').html(html);
                crumb();
            } 
        });
    });
});

jQuery(document).ready(function(){
    jQuery('#filters').submit();
});