Ajax無限向下滾動分頁。 在ajax調用中使用異步時圖像未顯示

Question

當用戶向下滾動頁面時，我正在使用ajax加載數據。 我正在使用async = false; 除非已經運行的調用完成，否則它將停止對ajax函數的調用。 是的，不建議使用異步。 但是為了防止數據混亂，我必須使用它。 這是我的ajax function

<script type="text/javascript">

   var page = 1;
   var busy = false; 

   var lastScrollTop = 0;
  $(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop)
   {
       if( $(window).scrollTop() + $(window).height() > $(document).height()-550 && busy == false)
        {
           loadMoreData(page);
           page++;
       }

   }

   lastScrollTop = st;
});



   function loadMoreData(page){

     $.ajax(
           {
               type: "POST",
               url: '<?php echo base_url('sura/load_verse/'.$sura_id.'/')?>'+page,
               async: false,
               cache: false,
               beforeSend: function()
               {
                   $('#loader_message').show();
               }
           })
           .done(function(data)
           {
               if(data == ""){
                  $('.ajax-load').html("No More Data Found");
                   return;
               }
               $('.ajax-load').hide();
               $("#post-data").append(data);
           })
           .fail(function(jqXHR, ajaxOptions, thrownError)
           {

           });

            busy = false;
            $('#loader_message').hide();
   }
</script>

但異步調用不允許瀏覽器顯示我的加載圖片$('#loader_message').show(); 在調用獲取數據時。 有人可以在使用異步調用時幫助我顯示圖像嗎？或者有異步的替代方法，它將同時停止多個請求。 謝謝

Answer 1

我相信解決方案是在啟動ajax調用之前顯示加載程序。 beforeSend不起作用，因為直到$.ajax()完成后才對DOM進行修改，並且show加載程序符合修改DOM的資格。

以下是我建議的解決方案。 我對您的代碼做了一些更改，以使用我認為是JavaScript的“最佳做法”。 我總是避免的一件事是在JavaScript中使用PHP代碼。 如果將javascript移至外部文件，對base_url()所做的操作將成為問題。 這就是為什么我通常定義如下所示的var baseURL原因。

我還緩存了需要多次創建的所有JQuery對象，這就是為什么要添加vars thisWindow和loader原因。

看起來，一旦將busy = true設置busy = true ，就永遠不會變回false 。 可以通過添加一個.always調用來解決此問題，該調用運行busy=false 。 加載程序也.always隱藏在.always因此即使有ajax .fail ，也可以確定將其刪除。

我認為busy適當的管理可以使用async: true, 我強烈建議您嘗試一下。

這是我的答案

<script>
var page = 1;
var busy = false;
var baseURL = window.location.protocol + "//" + window.location.hostname;
var lastScrollTop = 0;
var thisWindow = $(window);
var loader = $('.ajax-load');

thisWindow.scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > lastScrollTop)
    {
        //check busy first, if busy=true you avoid making calls
        //do scrollTop() and height()
        if (busy == false && thisWindow.scrollTop() + thisWindow.height() > $(document).height() - 550)
        {
            loadMoreData(page);
            page++;
        }

    }

    lastScrollTop = st;
});


function loadMoreData(page) {
    busy = true;
    loader.show();

    $.ajax(
            {
                type: "POST",
                url: baseURL + "/sura/load_verse/$sura_id/" + page,
                async: false,
                cache: false,
            })
            .done(function (data)
            {
                if (data == "") {
                    loader.html("No More Data Found");
                    return;
                }
                $("#post-data").append(data);
            })
            .fail(function (jqXHR, ajaxOptions, thrownError)
            {

            })
            .always(function () {
                busy = false;
                loader.hide();
            });

}
</script>