Данные загрузки Ajax на функцию прокрутки

Question

Как бы создать функцию, которая динамически загружает данные через ajax, например Facebook или Twitter?

Ive уже написала функцию, основанную на исследовании, которое я сделал, но он, похоже, не работает, поэтому я хочу услышать, как вы это сделали.

$(document).ready(function() { 
    $(window).scroll(function() { 
    var pagenumber = document.getElementById("pagenumber"); 
    var results_box = document.getElementById("results_box"); 
    var combo= pagenumber.innerHTML.split("|"); 
    var pn = parseInt(combo[0]); 
    var last= parseInt(combo[1]);  
    if($(window).scrollTop() == $(document).height() - $(window).height()) {    
     // ajax call get data from server and append to the div 
     results_box.innerHTML="Loading..."; 
     if(last != 1){ 
      if (pn < last) { 
      request_page(pn+1); 
      }    
      else if(pn==last){ 
      pagenumber.innerHTML = pn+1 +"|"+last; 
      request_page(last);             
      } 
      else{ 
      results_box.innerHTML="No More Content available"; 
      } 
     } 
    } 
    }); 
}); 

Эта функция не показывает какой-либо вопрос в консоли, но он либо не срабатывают, либо загружает несколько страниц одновременно. Весь вход приветствуется.

Answer 1

Когда я делал бесконечную прокрутку, я запускаю скрипт, когда свиток находится в пределах 10% от нижнего края, а не точного равенства, как у вас есть. Это помогает активировать функцию более надежным способом. Вы можете предотвратить сразу несколько нагрузок, установив переменную в DOM при запуске ajax-вызова и сбросив ее, когда она закончится. Я применил эти идеи к приведенному ниже коду. Надеюсь, поможет.

$(document).ready(function() { 
    $(window).scroll(function() { 
     var pagenumber = document.getElementById("pagenumber"); 
     var results_box = document.getElementById("results_box"); 
     var combo = pagenumber.innerHTML.split("|"); 
     var pn = parseInt(combo[0]); 
     var last = parseInt(combo[1]);  
     if ($(document).hasClass("idle") && ($(window).scrollTop() >= ($(document).height() - $(window).height()) * 0.9)) {    
      //ajax call get data from server and append to the div 
      //when request begins ("beforeSend"), $(document).toggleClass("idle"); 
      results_box.innerHTML = "Loading..."; 
      if (last != 1) { 
       if (pn < last) { 
        request_page(pn+1); 
       } else if (pn == last) { 
        pagenumber.innerHTML = pn + 1 + "|" +last; 
        request_page(last);             
       } else { 
        results_box.innerHTML = "No More Content available"; 
       } 
      } 
      $(document).toggleClass("idle"); 
     } 
    }); 
});