jquery - 在延迟加载期间使用 JQuery 滚动事件处理程序时如何防止多次 AJAX 调用？

Question

我使用 3 个不同的函数通过 AJAX 将数据加载到我的 DIV 中。当浏览器滚动条保留在我延迟加载数据的 DIV 底部时，我试图阻止多个 AJAX 调用。

这可行，但有时(只是有时)滚动条保留在我的 div 底部，这将导致发生许多 AJAX 调用。我该如何防止这种情况发生？

$(document).ready(function() {

    //form submit by click
    $("#submit").click(function(e) {
        // Prevent Default Action In Case to Load data by form
        e.preventDefault();

        //prevent select to post empty data
        $('select').each(function() {
            if ($(this).val() == '') {
                $(this).attr('disabled', 'disabled');
            }
        });

        // Define what we need
        var loading = "<img src='/zojfa/images/loading.gif' alt='Loading...' />";
        var scrolltop = $('#scrollbox').attr('scrollTop');
        var scrollheight = $('#scrollbox').attr('scrollHeight');
        var windowheight = $('#scrollbox').attr('clientHeight');
        var post = $(this).attr("name") + "=" + $(this).val();
        var form_data = $('#search_form').serialize() + "&" + post;
        var scrolloffset = 20;

        //empty content if another value sent to code
        $('#content').empty();
        //load data
        loaddata(form_data, 0);
    });

    //listen to scroll function
    $('#scrollbox').scroll(function() {

        //define what we need
        var scrolltop = $('#scrollbox').attr('scrollTop');
        var scrollheight = $('#scrollbox').attr('scrollHeight');
        var windowheight = $('#scrollbox').attr('clientHeight');
        var scrolloffset = 20;

        //get number of div which will append to script in case of limit database to page 2 or 3 or...
        size = $('#content > div').children().size();



        //if we reach to bottom of div we are going to call to ajax function
        if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
            var form_data = $('#formdata').val();

            //if remain of size(count of div) is 0 then we have more data to show because we limit data provided by script to 7 field(we handle situation that we had 14 or 21 respond from database in "next step" because if there is no data to show we dont have to let script to run)
            if (size % 7 == 0) {
                //call to load data function
                setTimeout(function() { loaddata(form_data, size) }, 1500);
            } else {
                //do nothing its just in case we need to append something like no more data to load
            }
        }
    });

    // page load finish
});


//function to load data
function loaddata(form_data, size) {
    number = "&size=" + size;
    //fetch new items
    $.post('dosearch.php', form_data + number, function(newitems) {
        //next step : if page echoing "" then do nothing
        if (newitems == '') {} else {
            //if we have data append these data to our div's #content
            $('#content').append(newitems);
        }
    });
}​

更新

我就像亲爱的@Kent Pawar和亲爱的@E.J一样。 Brennan 说，但现在当我到达 div 底部时，我会收到更多 AJAX 调用，但它仍然无法正常工作。

$("#submit").click(function(e) {
    // Do some Default
    e.preventDefault();

    $('select').each(function() {
        if ($(this).val() == '') {
            $(this).attr('disabled', 'disabled');
        }
    });

    // var what we need
    var loading = "<img src='/zojfa/images/loading.gif' alt='Loading...' />";
    var scrolltop = $('#scrollbox').attr('scrollTop');
    var scrollheight = $('#scrollbox').attr('scrollHeight');
    var windowheight = $('#scrollbox').attr('clientHeight');
    var post = $(this).attr("name") + "=" + $(this).val();
    var form_data = $('#search_form').serialize() + "&" + post;
    var scrolloffset = 20;

    $('#content').empty();

    //load data
    loaddata(form_data, 0);
    $('select').each(function() {
        if ($(this).val() == '') {
            $(this).removeAttr('disabled');
        }
    });
});


$('#scrollbox').scroll(function() {
    //var what we need
    var scrolltop = $('#scrollbox').attr('scrollTop');
    var scrollheight = $('#scrollbox').attr('scrollHeight');
    var windowheight = $('#scrollbox').attr('clientHeight');
    var scrolloffset = 20;

    // when we reach
    size = $('#content > div').children().size();

    if ($('#scrollbox').data('ajaxready') === false)
        return;

    if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
        $('#scrollbox').data('ajaxready', false);
        var form_data = $('#formdata').val();

        if (size % 7 == 0) {
            setTimeout(function() { loaddata(form_data, size) }, 1500);
        } else {

        }
    }
    $('#scrollbox').data('ajaxready', true);

    // page load finish
});

function loaddata(form_data, size) {
    number = "&size=" + size;
    //fetch new items
    $.post('dosearch.php', form_data + number, function(newitems) {
        if (newitems == '') {} else {
            $('#content').append(newitems);
        }
    });
}

Answer 1

问题不在于页面底部的滚动条，而在于事件处理程序的工作方式。有时，滚动条会位于页面底部，比如没有更多帖子可加载时...例如，观察 Facebook 的墙。

目前，JQuery scroll当滚动发生时触发事件。

JQuery docs:

A scroll event is sent whenever the element's scroll position changes, regardless of the cause. A mouse click or drag on the scroll bar, dragging inside the element, pressing the arrow keys, or using the mouse's scroll wheel could cause this event.

现在脚本的工作是进行一次 AJAX 调用来检查是否有内容要加载。您需要修改脚本以阻止在此期间发生多个 AJAX 调用，如我所见 @E.J. Brennan已经提出了同样的建议:)。

您可以按如下方式添加标志:

//listen to scroll function
  $('#scrollbox').scroll(function(){

        //[Kent] Before we service the event, we check if the last scroll event was handled/completed.
        //If it is not yet compelted, don't start another one and jump out of the code.
        if ($(window).data('ajax_in_progress') === true)
            return;

        //define what we need
        var scrolltop=$('#scrollbox').attr('scrollTop');
        var scrollheight=$('#scrollbox').attr('scrollHeight');
        var windowheight=$('#scrollbox').attr('clientHeight');
        var scrolloffset=20;

        //get number of div which will append to script in case of limit database to page 2 or 3 or...
        size =  $('#content > div').children().size();

        //if we reach to bottom of div we are going to call to ajax function
        if(scrolltop>=(scrollheight-(windowheight+scrolloffset))){
            $(window).data('ajax_in_progress', true);  //[Kent] prevent more scroll events as AJAX request will soon begin. 

            var form_data = $('#formdata').val();

            // if remain of size(count of div) is 0 then we have more data to show because 
            // we limit data provided by script to 7 field(we handle situation that we had 
            // 14 or 21 respond from database in "next step" because if there is no data to 
            // show we dont have to let script to run)
            if(size % 7 == 0){
                //call to load data function
                setTimeout(function(){loaddata(form_data, size)}, 1500);
            }else{
                //do nothing its just in case we need to append something like no more data to load
            }
        }
    });    



//function to load data
function loaddata(form_data, size){
    number = "&size=" + size;
    //fetch new items
    $.post('dosearch.php', form_data+number, function(newitems){
        // [Kent] This is the callback funciton that gets executed ONLY
        // when the AJAX request has completed. We will append the data
        // into the DOM and then reset the FLAG.

        //next step : if page echoing "" then do nothing
        if(newitems == ''){
        }else{
            //if we have data append these data to our div's #content
            $('#content').append(newitems).each(function() {
                //Adding a callback to append.
                // So we reset the flags here to indicate the scroll event 
                // has been handled/completed and so we turn scrolling events back on
                $(window).data('ajax_in_progress', false);
            });
        }
    });
}