Javascript 消除重复条目

我使用下面的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
        }
    }

var-eeLoading；//声明变量“eeLoading”
var eeTemplate=”http://www.mydomain.com/new_items/query"; // 模板页面的URL
var eeOffset；//声明变量“eeOffset”
var eeLimit=“5”
//在页面加载时执行以下函数
$（函数（）{
scrollAlert（）；
$（“#footer”）.append（“”；//添加一些html以包含状态和加载指示器
updateStatus（）；//更新显示的项目总数
});
//更新状态
函数updateStatus（）{
var totalItems=$（“ul.column li”）.长度；
eeOffset=项目总数；
eeURL=eeTemplate+“/”+eeOffset+“/”+eeOrderby+“/”+eeSort+“/”+eeLimit+“/”；//构建模板页面url
}
//暴风警报
函数scrollAlert（）{
var scrollTop=$（“#main”）.attr（“scrollTop”）；
var scrollHeight=$（“#main”）.attr（“scrollHeight”）；
var windowHeight=$（“#main”）.attr（“clientHeight”）；
如果（scrollTop>=（scrollHeight-（windowHeight+scrollOffset））&&eeLoading！==“false”）{
$（“#状态”）.addClass（“加载”）；
$.get（eeURL，函数（newitems）{//从指定的url获取新项
如果（newitems！=“”）{//如果newitems存在。。。
$（“ul.column”）.append（newitems）；/…将它们添加到父页面
updateStatus（）；//更新状态
}
否则{
eeLoading=“false”//如果没有新项目。。。
$（“#状态”）.removeClass（“加载”）；//删除加载按钮
$（“#status”）.addClass（“finished”）；//添加一些文本
}
});
}
如果（eeLoading！=“false”）{//如果仍然有新项目。。。
setTimeout（“scrollAlert（）；”，1500）；/…每1500毫秒检查一次scollheight
}
}

您的代码中似乎存在竞争条件。如果新项目的请求需要超过1.5秒才能完成，则在调用updateStatus（）之前将触发下一个请求。我认为解决这一问题的最简单方法是移动此代码：

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

在if语句中，updateStatus（）调用更新要查询的url后：

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

这样，当您请求新url时，状态将始终更新