为什么我的JQuery AJAX调用会执行两次，但前提是它没有被调用？

Question

在我的投资组合网站上，我正在使用jQuery .ajax()调用来通过XML提取我的投资组合。

我的问题是，在新页面加载后，如果点击首先的“投资组合”链接，那么投资组合部分将被正常拉入。如果在新页面加载后，在任何其他链接之后单击链接，那么投资组合部分将被拉入两次。

您可以在我的网站上看到自己的问题：Transhuman Creative

以下是根据rel属性确定点击了哪个导航链接的代码：

$("#nav a").click( function () {
    if($(this).attr("rel") == "blog") {
        return false;
    }else{
        $("#nav a").removeClass("selected");
        $(this).addClass("selected");
        setBlock($(this).attr("rel"));
    }
});

点击链接后，它会由setBlock()函数处理，该函数会隐藏现有内容并调用processBlock()函数来加载内容。

function setBlock(block) {
    if(firstNav) {
        processBlock(block);
        firstNav = false;
    }
    else
    {
        if($(".tab").length > 0 && $(".tab").is(":hidden") == false) {
            $(".hidable").fadeOut();
            $(".tab").fadeOut(function(){
                processBlock(block);
            });
        }
        else {
            $(".hidable").fadeOut(function (){
                processBlock(block);
            });
        }       
    }
}

processBlock()函数等待500ms让动画结束，然后显示内容块或调用loadItems()函数加载投资组合数据。

function processBlock(block) {
    var s = setInterval( function () {
        if (block == "portfolio") {         
            loadItems();            
        }else{          
            $("." + block).fadeIn();
        }
        clearInterval(s);
    }, 500);
}

最后，.ajax()调用位于loadItems()函数中。从XML文件加载porfolio数据后，它调用tabFade()函数来解析数据并生成投资组合部分的HTML。变量firstCall最初设置为true，这意味着如果组合数据已经在内存中，则意味着阻止重新加载：

function loadItems() {
    if (firstCall) {
        $.ajax({
            type: "GET",
            url: "data/portfolio.xml?ver=1.11",
            cache: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(){
                    $("#main").append(addItem($(this)));
                });
                tabFade();
                firstCall = false;
            }
        });
    }else{
        tabFade();
    }
}

有关可能导致双重负载问题的任何想法？谢谢你的帮助。

Answer 1

我认为最好在if条件内设置firstCall变量。否则它会在设置之前等待500+毫秒，并且只有在ajax请求完成后才会设置。

function loadItems() {
    if (firstCall) {
        firstCall = false; // Put the assignment here before waiting.
        $.ajax({
            type: "GET",
            url: "data/portfolio.xml?ver=1.11",
            cache: false,
            dataType: "xml",
            success: function(xml){
                $(xml).find('item').each(function(){
                    $("#main").append(addItem($(this)));
                });
                tabFade();
                //firstCall = false;
            }
        });
    }else{
        tabFade();
    }
} 

Answer 2

尝试使用setTimeout而不是setInterval。您可能还想使用setTimeout，因为我认为您不想多次运行代码？

可能是它正在运行该代码两次并进行两次ajax调用，因为它在500ms内没有响应。