Why does my JQuery AJAX call execute twice, but only if it's not called first?

On my portfolio website, I am using a jQuery .ajax() call to pull in my portfolio piece开发者_如何学运维s via XML.

My issue is that after a fresh page load, if the "portfolio" link is clicked first, then the portfolio pieces are pulled in normally. If, after a fresh page load, the "portfolio" link is clicked after any of the other links, then the portfolio pieces are pulled in twice.

You can see the issue for yourself on my site: Transhuman Creative

Here is the code that figures out which navigation link is clicked based on its rel attribute:

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

After a link is clicked, it is processed by theThe setBlock() function, which hides existing content and calls the processBlock() function to load content.

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

The processBlock() function waits 500ms to let the animation finish, then either shows the block of content or calls the loadItems() function to load the portfolio data.

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

And finally, the .ajax() call is in the loadItems() function. After loading the porfolio data from the XML file, it calls the tabFade() function to parse the data and generate the HTML for the portfolio pieces. The variable firstCall is initially set to true, and it is meant to prevent the portfolio data from being reloaded if it's already in memory:

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();
    }
}

Any thoughts on what might be causing the double load issue? Thanks for your help.

I believe it would be better to set the firstCall variable right inside of the if condition. Otherwise it waits 500+ milliseconds before being set and only gets set once the ajax request completes.

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();
    }
} 

Try using setTimeout instead of setInterval. You probably want to use setTimeout anyway as I don't think you want to run the code more than once?

It could be that it's running that code twice and making two ajax calls as it hasn't responded within 500ms.