Javascript 使用jQuery无限滚动脚本加载两页内容（仅需要一次加载时）

我正在为我的tumblr页面编写一个小jQuery脚本，它通过

jQuery.get（）

模拟无限滚动加载我希望从该站点的下一个页面获得的内容（这是一个tumblr站点，因此分页是可以的）。
我知道有一些无限的滚动插件，但所有我尝试不为我工作，而且，是相当脂肪。我不需要所有的函数性。 脚本加载了我想要的新元素，是的，但问题是每次都从两个页面加载内容。显然，它应该只加载一页内容

jQuery是：

$（文档）.ready（函数（）{
“严格使用”；
var nextPage=2；
var totalPages={totalPages}；
var url='/page//'；//基本url
$（文档）.on（'scroll'，function（）{
如果（下一页（在问题编辑中回答。转换为社区wiki答案。请参阅）

OP写道：

我使用存储最后位置（相对于文档）的控制变量
lastLoadingPos
解决了问题脚本插入页面内容的位置。如果该位置不变，则不会进行插入。这是因为脚本检测到在同一位置多次到达页面底部时，会发生多个内容插入。
是的，这解决了问题，但它不是优雅的，我认为这不是正确的解决方案。只是一个解决办法。如果有人知道它会受到欢迎：D

我的解决方法（当然，我还需要添加一两件事）：

$（文档）.ready（函数（）{
“严格使用”；
var nextPage=2；
var lastLoadingPos=0；//存储上次插入位置（与文档相关）
var totalPages={totalPages}；
var url='/page//'；//基本url
$（文档）.on（'scroll'，function（）{
如果（下一页）
scroll
事件可能会触发多次，从而导致Ajax
$.get（）
也会被多次触发。您应该添加一个变量，以防止自己在当前Ajax请求完成之前获取另一个页面。此外，您应该在Ajax回调中执行增量
nextPage++
。噢，谢谢@FelixBonkoski。我现在看到了您的评论。我昨晚使用了相同的解决方案。它是p很晚了，所以我想今天更新一下（午饭前开始写，现在完成，抱歉，不要重复）。我会按照你明智的建议更改增量位置。非常感谢你的回答：D
    $(document).ready(function() {
      "use strict";
      var nextPage = 2;
      var totalPages = {TotalPages};
      var url = '/page/'; // base url
      $(document).on('scroll', function() {
        if (nextPage <= totalPages) { // if exist new pages
          if ($(window).scrollTop()== $(document).height() - $(window).height()) { // when reach the page bottom
            $.get(url + nextPage, function(data){ // get the next page
              $(data).find(".post").appendTo(".posts"); // filter content we want and append it to the actual page element
              picturefill(); // reload picturefill,making the new images responsive
            });
            nextPage++; // increment nextpage counter
          };
        } else { // exit if no more pages
          return;
        }
      });
    });  

<div class="posts">
<article class="photo-container post" id="{PostID}" data-reblog="{ReblogURL}">
    <div class=" picturefill" data-picture data-alt="" data-class="photo">
        <div class="picturefill" data-src="{PhotoURL-HighRes}" ></div>
        <div class="picturefill" data-src="{PhotoURL-500}" data-media="(max-width: 568px)"></div>
        <div class="picturefill" data-src="{PhotoURL-250}" data-media="(max-width: 250px)"></div>
        <img alt="" class="photo" src="http://img.jpg"> <!-- generated by picturefill -->
        <noscript><img class="photo" src="{PhotoURL-HighRes}" alt=""></noscript>
    </div>
    <!-- MORE CODE -->
</article>

$(document).ready(function() {
  "use strict";
  var nextPage = 2;
  var lastLoadingPos = 0; // stores last insertion position (document related)
  var totalPages = {TotalPages};
  var url = '/page/'; // base url
  $(document).on('scroll', function() {
    if (nextPage <= totalPages) { // if exist new pages
      var top = $(window).scrollTop();
      if ((lastLoadingPos != top) && (top== $(document).height() - $(window).height())) { // when current bottom position reached first time
        lastLoadingPos = top; // new last insertion position
        $.get(url + nextPage, function(data){ // get the next page
          $(data).find(".post").appendTo(".posts");  // filter wanted content
          picturefill(); // reload picturefill, making new images responsive
          nextPage++; // increment nextpage counter
        });
      }
    } else { // exit if no more pages
      return;
    }
  });
});