Понимание того, как выполнять функции Javascript в определенном порядке. - PullRequest
Новая
       10

Понимание того, как выполнять функции Javascript в определенном порядке.

0 голосов
/ 26 октября 2011

Я создаю фреймворк, который позволяет мне начинать с обычного статического веб-сайта, а затем, если у пользователя включен Javascript, он превращается в одностраничный сайт, который извлекает разделы из статических страниц, когда пользователь перемещается по сайту.

Я все еще работаю над идеями, но изо всех сил пытаюсь понять, как выполнять функции Javascript в определенном порядке, мой код (отредактированный) выглядит примерно так:

РЕДАКТИРОВАТЬ Мой код более подробно:

Когда функция loadSiteMap () завершает работу, переменная siteMap выглядит следующим образом: 

{ 
    "pageData" : [
        {   
            "loadInTo"      :   "#aboutUs",
            "url"           :   "aboutUs.html",
            "urlSection"    :   ".sectionInner"
        },
        {   
            "loadInTo"      :   "#whatWeDo",
            "url"           :   "whatWeDo.html",
            "urlSection"    :   ".sectionInner" 
        },
        {   
            "loadInTo"      :   "#ourValues",
            "url"           :   "ourValues.html",
            "urlSection"    :   ".sectionInner" 
        },
        {   
            "loadInTo"      :   "#ourExpertise",
            "url"           :   "ourExpertise.html",
            "urlSection"    :   ".sectionInner" 
        }   
    ]
}

Остальная часть моего кода: 

function loadSiteMap() {
    $('#body').empty();

    $.ajaxSetup({cache : false});

    $.ajax({
        url: 'js/siteMap.js',
        async: false,
        dataType: 'json'

    })
    .done(function(data){
        siteMap = data;
    })
    .fail(function(jqXHR, status){
        alert('Its all gone to shit');
    }); 
}

loadSiteMap();//So this is the first to be executed     



$(function(){
    function loadDataFromSiteMap() {

        var toAppend = '';
        var markerID = 'mark-end-of-append' + (new Date).getTime();
        var loadGraphic = '<img src="images/loadGraphic.gif" alt="loading..." class="loadGraphic" />'

        for(var i=0; i<siteMap.pageData.length; i++) {
            var loader = siteMap.pageData[i];
            toAppend += '<div id="'+ loader.loadInTo.substr(1) +'" class="sectionOuter">'+ loadGraphic +'</div>';
        }

        toAppend += '<div id="' + markerID + '"></div>';

        $('#body').append(toAppend);

        var poller = window.setInterval(function(){

            var detected = document.getElementById(markerID);

            if(detected){
                window.clearInterval(poller);
                $(detected).remove();

                for(var i=0; i<siteMap.pageData.length; i++){
                    var loader = siteMap.pageData[i];

                    var dfd = $.ajax({
                        url: loader.url,
                        async: false
                    });

                    dfd.done(function(data, status, jqXHR){
                        var sections = $(data).find(loader.urlSection);

                        $(loader.loadInTo).html(sections).filter(loader.urlSection);
                    });

                    dfd.fail(function(jqXHR, status){
                        alert('Its all gone to shit');
                    }); 
                }
            }
        }, 100);

    }



    function buildCarousel() {
        $('.sectionInner').each(function(i) {
            if($(this).has('.carousel').length) {
                $(this).append('<a href="#" class="prev">Prev</a><a href="#" class="next">Next</a>');
                $('.prev,.next').fadeIn('slow');
            }
        });
    };


    loadDataFromSiteMap();//This runs second then I want to execute...
    buildCarousel();//Then when this is complete execute...
    anotherFunction();//and so on...

Надеюсь, из этого вы увидите, чего я пытаюсь достичь в плане выполнения функций по порядку. Я хотел бы в конечном итоге превратить эту концепцию в плагин jQuery, чтобы я мог поделиться им. Если это имеет какое-то отношение к тому, чего я пытаюсь достичь сейчас, я приветствую мысли.

Большое спасибо заранее.

1 Ответ

1 голос
/ 26 октября 2011

Я думаю, что AJAX - единственный случай, когда вам придется беспокоиться о функциях, не выполняющихся в определенном порядке в JavaScript.

Хитрость в асинхронных вызовах функций, таких как AJAX, заключается в использовании обратных вызовов.Поместите все в разделе «Готовность документа» в другую вызываемую функцию (или просто анонимную функцию в полном коде AJAX), затем вызывайте эту функцию только после завершения вызова AJAX.Причина в том, что остальная часть вашей программы будет выполняться во время обработки вызова AJAX, поэтому обратные вызовы гарантируют, что вызов AJAX будет выполнен, прежде чем продолжить то, что вы хотите выполнить дальше.

Если какая-либо из этих других функцийесли вы выполняете асинхронный вызов, вам нужно будет аналогичным образом выполнить обратный вызов после завершения, который продолжит выполнение остальных функций.

В нынешнем виде, однако, я не вижу причин для вызова каждой функции, кроме вызова AJAX.с целью.По крайней мере, не зная, как работают эти функции.

Редактировать: Пример кода обратного вызова: 

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    //Set sitemap
    (function() {
      //Make the calls to your list of functions
    })(); //<- Execute function right away
  }
});

Также, согласно здесь , async: falseне будет работать для «междоменных запросов и dataType:« jsonp »запросов», поэтому, если вы звоните в другой домен или используете jsonp, это может быть проблемой.

...