如何在AJAX中使用.readyState

Question

所以我有一个AJAX功能，允许我过滤我的WordPress帖子。除了用户快速点击三个选项，第一个选项将帖子缩小到3，第二个选项缩小到2，第三个选项缩小到1之外，它的工作方式非常完美。用户将看到的是3个属性然后在预加载器之后很快出现2然后1走了。当预加载器出现时，我不希望用户看到属性消失/出现。

如何使用.readyState检查函数是否已在运行以及是否为abort（）

我的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();
});