Почему мой вызов 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() ожидает 500 мс, чтобы завершить анимацию, затем либо показывает блок содержимого, либо вызывает функцию loadItems() для загрузки данных портфолио.

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

* 1027И, наконец, вызов .ajax() находится в функции loadItems().После загрузки данных портфолио из файла XML вызывается функция 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

Я считаю, что было бы лучше установить переменную firstCall прямо внутри условия if.В противном случае он ожидает 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, поскольку он не ответил в течение 500 мс.