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

我已经研究了与此相关的其他问题，似乎我需要等待第一个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;
        });
      }
    });
  } 
}

我没有正确处理这个问题，或者有人能看到这里存在的任何潜在问题吗

更新 这是制作第一个滚动时生成的标记示例

因此，当页面加载时，将显示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（）

---

此处的更多详细信息：

谢谢您的回答，但恐怕这没有帮助，我添加了一个标记示例，该标记是在制作第一个滚动时生成的

<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>

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