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>