Ajax request and its interruption

There is a script:

function search_handler(form) {
$('#bodycatalog').html("<span class='load'></span>");
    var number = 10; // 
    var offset = 0; // 
    var busy = false;
    if (!busy){
    busy = true;
    $.get("/wp-content/themes/theme/handler/handler.php", { 
    off: offset,
    angle: form.angle.value,
    protect: form.protectlvl.value,
    color: form.colorz.value,
    volt: form.volt.value,
    power: form.power.value,
    byuse: form.byuse.value
    },
    function(data){
        if(data == ""){
            if($(".notfound").length==0) {
                $('#bodycatalog').append("<tr><td><span class='notfound'>,       .    .</span></td></tr>");
            }
            $('.load').remove();
        }
        else{
            $('#bodycatalog').html(data);
            offset = offset+number;
            busy = false;
            $(window).bind('scroll', function(e) {
                if($(window).scrollTop() + $(window).height() > $(document).height() - 1200 && !busy) {
                busy = true;
                    $("#catalog").after("<span class='load'></span>");
                $.get("/wp-content/themes/theme/handler/handler.php", { 
                off: offset,
                angle: form.angle.value,
                protect: form.protectlvl.value,
                color: form.colorz.value,
                volt: form.volt.value,
                power: form.power.value,
                byuse: form.byuse.value
                },
                function(data){
                    if(data == ""){
                        $('.load').remove();
                    }
                    else{
                        if($(window).scrollTop() + $(window).height() > $(document).height() - 600){
                        $('#bodycatalog').append(data);
                        $('.load').remove();
                        offset = offset+number;
                        }
                        busy = false;
                    }
                });
                }
            });
        }
    });
}
}

The handler.php handler returns filtered posts from the database.
And loads them when scrolling by 10 pieces…

Problem: When the filter parameters are changed abruptly, the previous database query continues to work. And they are combined with the new one, giving the wrong result.

Task: Interrupt the previous request when changing filter parameters..


Answer 1

Alternatively, you can block your filters for the duration of the request.
See example. It may be primitive, but it will help to avoid cases when an unintentional user hits the filters like a machine gun.

HTML

<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />

jQuery

$.ajaxSetup({
    beforeSend: function() { $(':checkbox').prop('disabled', true); },
    complete: function() { $(':checkbox').prop('disabled', false);}
});
$(":checkbox").change(function(){
    if($(this).prop('checked')){
        $.ajax({
            type: 'POST',
            url: '/echo/html/'
        });
    }
});

Leave a reply

Please enter your comment!
Please enter your name here