无限滚动遇到问题

Question

我一直在试图让这个无限的滚动脚本在过去的8个小时中工作，但无法弄清楚。

我在这里上传了网站，所以你可以看到问题：http://kevinellerton.com/meditationmagazine/article01/当你向下滚动，它应该加载article04，然后03，然后02，然后停止加载文章，因为article01已经加载。问题是它不会停止加载它们......并且如果你在控制台中跟踪控制台记录的变量，那真是​​太不可思议了。我认为这个问题可能与“范围”这样做，但我不知道:-(

请帮助，如果你能

谢谢你这么多

$(document).ready(function() { 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 



// THIS WHOLE SECTION CREATES THE INFINITE SCROLL EFFECT BY ACCESSING THE ARTICLES IN ORDER. 
// IT'S NOT QUITE WORKING THOUGH. 
// IF YOU FIGURE OUT THE BUGS, YOU CAN ACTIVATE INFINITE SCROLL! 
// POST CODE ON STACKOVERFLOW... MAYBE YOU'LL GET SOME HELP! 

// get initial page name 
if (articleCounter == 0) { 
    var pathArray = window.location.pathname.split('/'); 
    var pageName = pathArray[2]; 
    console.log(pageName); 
} 

// initialize variables 
var win = $(window); 
var articleCounter = 0; 
console.log(articleCounter); 

// Each time the user scrolls 
win.scroll(function() { 
    // End of the document reached? 
    if ($(document).height() - win.height() == win.scrollTop()) { 
     $('#loading').show(); 

     // if this article is the next one in the list, skip it and go to next one 
     if (pageName == database[articleCounter]) { 
      articleCounter++; 
      var nextPage = database[articleCounter]; 
      pageName = nextPage; 
      console.log(nextPage); 
     } else { 
      var nextPage = database[articleCounter]; 
      pageName = nextPage; 
      console.log(nextPage); 
     } 

     // append nextPage to the end of the document 
     if (nextPage !== undefined) { 
      $.ajax({ 
       url: '../' + nextPage + '/index.php', 
       dataType: 'html', 
       success: function(html) { 
        $('body').append(html); 
        $('#loading').hide(); 
        articleCounter++; 
         console.log(articleCounter); 
        // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
       } 
      }); 
     } 
    } 
}); 
}); 

编辑：！

我完全重写了它，它仍然有完全相同的问题，我90％确定这个问题与SCOPE有关，但我没有完全弄清楚它。不工作：

$（文件）。就绪（函数（）{

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 

var articleCounter = 0; 

// get initial page name 
var pathArray = window.location.pathname.split('/'); 
var initialPage = pathArray[2]; 
alert("Initial page is " + initialPage); 

// when you scroll 
$(window).scroll(function() { 
    // if you've reached the end of the document 
    if ($(document).height() - $(window).height() == $(window).scrollTop()) { 
     $('#loading').show(); 
     // if you've reached the end of the database 
     if (articleCounter >= database.length) { 
      // load ending footer 
      alert("You've reached end of database! articleCounter is " + articleCounter); 
      // quit program 
     } 
     else if (database[articleCounter] == initialPage) { 
      articleCounter++; 
      appendArticle(); 
      articleCounter++; 
     } 
     else { 
      appendArticle(); 
      articleCounter++; 
     } 
    } 
}); 

// end scroll function 

function appendArticle() { 
    $.ajax({ 
     url: '../' + database[articleCounter] + '/index.php', 
     dataType: 'html', 
     success: function(html) { 
      $('body').append(html); 
      $('#loading').hide(); 
      // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
     } 
    }); 
} 

Answer 1

你在if语句定义的变量，那也不行，我会想，说你翻页器和计数器逻辑是确定，顺便说一句，你有/* */评论几乎所有的代码，以便：

$(document).ready(function() { 
//you will return to page beginning if no article, so you don't have to include article1 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02" 
]; 



// initialize variables 
var win = $(window); 
var articleCounter = 0; 
var loaded = true; 
// Each time the user scrolls 
win.scroll(function() { 
    if ($(document).height() - win.height() == win.scrollTop()) { 
     if(articleCounter == database.length){ 
      window.scrollTo(0,0); 
      return; 
     } 

     if(!loaded) return 
     $('#loading').show(); 
     loaded = false; 
      $.ajax({ 
       url: '../' + database[articleCounter] + '/index.php', 
       dataType: 'html', 
       success: function(html) { 
        $('body').append(html); 
        $('#loading').hide(); 
        articleCounter++; 
        loaded = true; 
       } 
      }); 

    } 
}); 


}); 

Answer 2

$(document).ready(function() { 

// DATABASE OF ARTICLES 
var database = [ 
    "article04", 
    "article03", 
    "article02", 
    "article01" 
]; 

var win = $(window); 
ArticleLoad_Counter = database.length - 1;// Assuming that article01 is initialy loaded. ie, then we need to load remaing 3 articles. 
articleCounter = 0; 
var pathArray = window.location.pathname.split('/'); 
var pageName = pathArray[2]; 
console.log(pageName); 

$(window).scroll(function() { 
    if ($(win).scrollTop() + $(window).height() == $(document).height()) { 

     // Scroll bar reached at bottom 
     alert("reached bottm"); 
     if (ArticleLoad_Counter != 0) { 
      $('#loading').show(); 

      if (pageName == database[articleCounter]) { 
       articleCounter++; 
       nextPage = database[articleCounter]; 
       pageName = nextPage; 
       console.log(nextPage); 
       LoadNewArticle(nextPage); // Function for Ajax Call 

      } else { 
       nextPage = database[articleCounter]; 
       pageName = nextPage; 
       console.log(nextPage); 
       LoadNewArticle(nextPage); // Function for Ajax call 
      } 
     } 
    } 
}); 

}); 

    function LoadNewArticle(nextPage) { 
    $.ajax({ 
    url: '../' + nextPage + '/index.php', 
    dataType: 'html', 
    success: function (html) { 
     $('body').append(html); 
     $('#loading').hide(); 
     ArticleLoad_Counter--; 
     alert(nextPage); // Loaded article name 
     console.log(articleCounter); 
     // POSSIBLE TO CHANGE URL PATH NAME HERE??? 
    } 
    }); 

    } 

希望这段代码为您的网站的作品！