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();。谁可以帮助我显示图像，同时使用异步调用.Or是否有一个异步将停止多个请求在同一时间替代。谢谢

Answer 1

我相信解决方案是在启动ajax调用之前显示加载器。beforeSend不起作用，因为只有在$.ajax()完成之后才会修改DOM，并且show装载器才有资格修改DOM。

下面是我建议的解决方案。我对你的代码做了一些修改，使用了我认为是javascript的“最佳实践”。我总是避免在javascript中使用PHP代码。如果你把你的base_url()移到一个外部文件中，你用javascript做什么将会成为一个问题。这就是为什么我通常定义一个var baseURL，如下所示。

我还缓存所有需要多次创建的JQuery对象，这就是添加thisWindow和loader变量的原因。

而且，一旦设置了busy = true，它就再也不会更改回false了。这可以通过添加一个运行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>