使用PHP向下滾動頁面時加載Ajax數據

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對象分配給變量：

請參考此鏈接

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