Ajax 触发两次替换 Rails 4 中的最后一个请求内容

Ajax fires twice replacing last requests content in Rails 4

本文关键字：最后一个 请求 Rails 替换 两次 Ajax      更新时间：2023-09-26

我已经查看了与此相关的其他问题，似乎我需要等待第一个 Ajax 请求完成，然后再继续下一个请求。我以为下面的代码会这样做，但由于某种原因，请求触发了两次。

function infiniteScroll() {
  if($('#infinite-scrolling').size() > 0) {
    $(window).on('scroll', function(){
      //Bail out right away if we're busy loading the next chunk
      if(window.pagination_loading){
        return;
      }
      var more_url = $('.pagination a.next_page').attr('href');
        if(more_url && $(window).scrollTop() > $(document).height() - $(window).height() - 50){
          //Make a note that we're busy loading the next chunk.
          window.pagination_loading = true;
          $('.pagination').html('<img src="/assets/ajax_loader.gif" alt="Loading..." title="Loading..." />')
          $.getScript(more_url).always(function(){
          window.pagination_loading = false;
        });
      }
    });
  } 
}

js.erb 文件

$('#all_images').append("<%= j render 'shared/image_ajax' %>");
console.log('script fired');
<% if @images.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate @images %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').empty();
<% end %>

因此，当我向下滚动页面（为了捕获事件而非常慢）时，我会在我的控制台中得到这个

XHR finished loading: GET "http://localhost:3000/portfolio?page=2&_=1456333727211"
script fired
XHR finished loading: GET "http://localhost:3000/portfolio?_=1456333727212&page=3"
script fired

我是否没有正确处理这个问题，或者任何人都可以在这里看到任何潜在的问题？

更新

这是进行第一次滚动时生成的标记的示例

因此，当页面加载时，将显示4个结果

<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_18" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_17" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 Landscapes" id="image_16" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 Landscapes" id="image_15" style="position: absolute; left: 24.9593%; top: 0px;">...</div>

然后我滚动并附加另外 4 个结果

<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_18" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_17" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 Landscapes" id="image_16" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 Landscapes" id="image_15" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_14" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest" id="image_13" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest Landscapes" id="image_12" style="position: absolute; left: 24.9593%; top: 0px;">...</div>
<div class="image isotope-item ok-md-3 ok-xsd-12 ok-sd-6 PlacesOfInterest Landscapes" id="image_11" style="position: absolute; left: 24.9593%; top: 0px;">...</div>

但是，作为用户，我只看到 4 张图像（刚刚附加的 4 张替换了加载的前 4 张），在此之后，尽管滚动事件按预期工作。

您可以检查$.active是否返回 0;如果是，则第一个 ajax 请求已完成。

所以在你的情况下：

if ($.active !== 0) {
  return;
}

或者，您也可以尝试$.ajaxStop()

更多详情请见：http://api.jquery.com/ajaxStop/

相关文章：