Eliminate Duplicate Entries

Question

I am using the following javascript to dynamically load the contents of an external page within the parent page. The external page is within the same domain as the parent page and queries a database for blog entries. I am using the variable "eeOffset" to pass a value into the database query in the external page to offset the results returned i.e. if eeOffset is "5" then the query returns the next database records from the 6th one. The "eeLimit" variable sets the total number of items returned with each request. The problem I have is that entries displayed within the parent page are being duplicated - it's as if the url of the template page is not being updated before the request for new items is fired. Does anyone have any suggestions how to overcome this problem?

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
     }
    }

Answer 1

It looks like there is a race condition in your code. If the request for new items takes longer than 1.5 seconds to complete, you'll fire off the next request before calling updateStatus(). I think the easiest way to fix this is to move this code:

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

Inside the if statement, after the updateStatus() call updates the url to query:

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

That way the status will always be updated when you request the new url.