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

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

当页面向下滚动时，get_summary_details（）函数工作正常。这个函数是这样的

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.
而get_summary_details（）处理请求用户将转到页面顶部并向下滚动，同样这个get_summary_details（）函数将执行。

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!

谢谢！

2 个解决方案

#1

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

您需要通过设置布尔标志来检查ajax请求是否繁忙

var loadingSummaryDetails = false;

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

启动Ajax时将其设置为true，并在调用结束时将其设置为false

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;
        });         
}

#2

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

你的AJAX请求最有可能排在一起，因为它们是异步的，即使JavaScript本身大多是单线程的。

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:

您可以使用abort（）方法确保一次只运行一个请求。您需要将$ .ajax（）返回的jqXHR对象分配给变量：

please refer this link

请参考此链接

#1