2009-12-23 12 views
0

다음 javascript를 사용하여 상위 페이지 내에서 외부 페이지의 내용을 동적으로로드합니다. 외부 페이지는 상위 페이지와 동일한 도메인 내에 있으며 데이터베이스에 블로그 항목을 쿼리합니다. 변수 "eeOffset"을 사용하여 외부 페이지의 데이터베이스 쿼리에 값을 전달하여 반환 된 결과를 오프셋합니다. 즉, eeOffset이 "5"이면 쿼리가 6 번째 데이터베이스 레코드를 반환합니다. "eeLimit"변수는 각 요청과 함께 반환되는 총 항목 수를 설정합니다. 내가 가진 문제는 상위 페이지에 표시된 항목이 복제된다는 것입니다. 새 항목에 대한 요청이 시작되기 전에 템플릿 페이지의 URL이 업데이트되지 않는 것과 같습니다. 누구든지이 문제를 극복하는 방법에 대한 제안이 있습니까?중복 항목 제거

var eeLoading; // Declare variable "eeLoading" 
var eeTemplate = "http://www.mydomain.com/new_items/query"; // URL to template page 
var eeOffset; // Declare variable "eeOffset" 
var eeLimit = "5" 

//Execute the following functions when page loads 
$(function(){ 
    scrollAlert(); 
    $("#footer").append("<div id='status'></div>"); //Add some html to contain the status and loading indicators 
    updateStatus(); // Update the total number of items displayed 
    }); 

//Update Status 
function updateStatus(){ 
    var totalItems = $("ul.column li").length; 
    eeOffset = totalItems; 
    eeURL = eeTemplate+"/"+eeOffset+"/"+eeOrderby+"/"+eeSort+"/"+eeLimit+"/"; // Build the template page url 
    } 

//Scoll Alert 
function scrollAlert(){ 
    var scrollTop = $("#main").attr("scrollTop"); 
    var scrollHeight = $("#main").attr("scrollHeight"); 
    var windowHeight = $("#main").attr("clientHeight"); 
    if (scrollTop >= (scrollHeight-(windowHeight+scrollOffset)) && eeLoading !== "false"){ 
     $("#status").addClass("loading"); 
     $.get(eeURL, function(newitems){ //Fetch new items from the specified url 
      if (newitems != ""){ //If newitems exist... 
       $("ul.column").append(newitems); //...add them to the parent page 
       updateStatus(); //Update the status 
       } 
      else { 
       eeLoading = "false"; //If there are no new items... 
       $("#status").removeClass("loading"); //Remove the loading throbber 
       $("#status").addClass("finished"); //Add some text 
       } 
      }); 
     } 
    if (eeLoading !== "false") { //If there are still new items... 
     setTimeout("scrollAlert();", 1500); //..check the scollheight every 1500ms 
     } 
    } 

답변

0

코드에 경쟁 조건이있는 것으로 보입니다. 새 항목에 대한 요청이 완료되는 데 1.5 초보다 오래 걸리면 updateStatus()를 호출하기 전에 다음 요청을 시작합니다.() 호출 쿼리 URL을 업데이트하는 updateStatus 후 if 문 내부

if (eeLoading !== "false") { //If there are still new items... 
    setTimeout("scrollAlert();", 1500); //..check the scollheight every 1500ms 
    } 

: 상태 것

if (newitems != ""){ //If newitems exist... 
    $("ul.column").append(newitems); //...add them to the parent page 
    updateStatus(); //Update the status 
    // Move setTimeout here 

그 방법을 나는이 문제를 해결하는 가장 쉬운 방법은이 코드를 이동하는 생각 새 URL을 요청하면 항상 업데이트됩니다.