使用PHP向下滚动页面时加载Ajax数据

Question

To load the data when page scrolls down using function like this

$(window).scroll(function(){
        if ($(window).scrollTop() == $(document).height() - $(window).height())
        {
            //alert('Scrolling Down');
            get_summary_details(); //Here it calls AJax Function load the data

        }
    });

get_summary_details() function works fine when page scrolls down.This function is like this

function get_summary_details()
    {

        var dataString=[];
        $('div.company_summary_data').each(function() {
            var id = $(this).attr('id');
            dataString.push(id);
        });                     
        $.ajax({
            url:"getajaxcompanysummarydetails",
            type:"POST",
            //dataType: "json",
            data:"last_app_data_id="+JSON.stringify(dataString),
            success:function(data)
            {                               
                $('.company_summary_data:last').after(data);

            }

        });         
    }

My problem is

• while get_summary_details() processing the Request user will go to top of the page and Scroll down , again this get_summary_details() function will execute.

How to prevent that Second Request Processing without completion of first Request.Is this Possible? Because of this i am getting duplicate records of data.I need to prevent to display duplicate records.

Thanks!

Answer 1

Your AJAX requests are most likely queueing up behind one another, because they are asynchronous, even though JavaScript itself is mostly single threaded.

You can use the abort() method to make sure only one request runs at a time. You need to assign the jqXHR object returned by $.ajax() to a variable:

please refer this link

Answer 2

You need to check whether the ajax request is busy by setting a boolean flag

var loadingSummaryDetails = false;

Set it to true when you start the Ajax and to false when the call finishes

function get_summary_details()
{
    if(loadingSummaryDetails) {
        return;
    }
    loadingSummaryDetails = true;

    var dataString=[];
    $('div.company_summary_data').each(function() {
        var id = $(this).attr('id');
        dataString.push(id);
    });                     
    $.ajax({
        url:"getajaxcompanysummarydetails",
        type:"POST",
        //dataType: "json",
        data:"last_app_data_id="+JSON.stringify(dataString),
        success:function(data)
        {     
            $('.company_summary_data:last').after(data);

        }

    }).always(function()
        {     
            loadingSummaryDetails = false;
        });         
}