무한 스크롤에 문제가 있습니다.

Question

저는이 무한 스크롤 스크립트가 지난 8 시간 동안 작동하도록 노력해 왔으며 알아낼 수 없습니다.

여기에 사이트를 업로드하여 문제가 표시 될 수 있습니다.아래로 스크롤하면 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??? 
       } 
      }); 
     } 
    } 
}); 
}); 

편집 :!

오늘 완전히 다시 작성했는데 여전히 똑같은 문제가 있습니다. 문제가 SCOPE와 관련 있다고 90 % 확신하지만 아직 해결하지 못했습니다. 아직 새 코드가 있습니다. 작동하지 않음 :

$ (문서) .ready (함수() {

// 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 문에서 변수를 정의, 그 확인을하지, 난 다음 페이지 카운터를 얻기를위한 당신의 논리가 OK라고 가정 것이고, BTW 그렇게 /* */ 거의 모든 코드를 주석 :

$(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??? 
    } 
    }); 

    } 

희망이 코드 것입니다 귀하의 사이트에 대한 작품!