Question

使用此功能

在页面向下滚动时加载数据

$(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 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);

            }

        });         
    }

我的问题是

处理请求用户的get_summary_details()将转到页面的top并Scroll向下，同时此get_summary_details()函数将会执行。

如何防止第二次请求处理而没有完成第一次请求。这可能吗？因此，我得到重复的数据记录。我需要阻止显示重复的记录。

谢谢！

Answer 1

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

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

请参阅此link

Answer 2

您需要通过设置布尔标志

来检查ajax请求是否繁忙

var loadingSummaryDetails = false;

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

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

2 个答案: