Understanding how to execute Javascript functions in a certain order

Question

I am creating a framework that allows me to start with a normal static website then if the user has Javascript enabled transforms it into a single page site that pulls in sections from the static pages as the user navigates the site.

I'm still working on the ideas but I'm struggling understanding how to execute Javascript functions in a certain order my code (edited) looks a like this:

EDIT My code in more detail:

When the loadSiteMap() function completes the variable siteMap looks like this:

{ 
    "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" 
        }   
    ]
}

The rest of my code:

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...

Hopefully from this you can see what I am trying to achieve in terms of executing functions in order. I would like to eventually turn this concept into a jQuery plugin so I can share it. If that has any bearing on what I am trying to achieve now I welcome thoughts.

Many thanks in advance.

Bob · Accepted Answer · 2011-10-26 15:42:19Z

1

I think AJAX is one of the only times you'll have to worry about functions not running in a certain order in JavaScript.

The trick to asynchronous function calls like AJAX is to make use of callbacks. Put everything in the "Doc ready" section into another callable function (or just an anonymous function in the AJAX complete code), then call this function only when your AJAX call completes. The reason being that the rest of your program will go on executing while the AJAX call is being processed, so callbacks insure the AJAX call is done before continuing what you want to execute next.

If any of these other functions are asynchronous then you'll have to similarly make a callback on completion that will continue executing the rest of the functions.

As it stands, though, I see no reason every function but the AJAX one should not be called in order. At least, not without knowing how those functions work.

Edit: A code example of a callback:

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

Also, according to here, async: false will not work on 'Cross-domain requests and dataType: "jsonp" requests', so if you're calling a different domain or using jsonp that might be the problem.

edited Oct 26, 2011 at 15:42

answered Oct 26, 2011 at 15:29

Bob

7,9915 gold badges39 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mtwallet Over a year ago

Thanks for the reply Bob. I have set all my ajax calls to async: false so shouldn't that mean that they execute in turn? Also would you mind showing me a code example for your suggestion? or a link to where I can learn more. I am not the best with JS.

Bob Over a year ago

@mtwallet, yes, they should. Which function(s) is/are not going in order? I think I need more context here

mtwallet Over a year ago

many thanks! I just finished updating my post to show the full code so far. I am using the new methods .done & .fail but I will try your suggestion.

mtwallet Over a year ago

that worked a treat! Can I use that method in any function in the same way? Many thanks for your help, I appreciate it.

Bob Over a year ago

@mtwallet I'm glad it worked out :) As for your question: You can use the callback technique in any .ajax call the same way, yes, if that's what you mean. The trick to create a function and call it immediately also works anywhere

Collectives™ on Stack Overflow

Understanding how to execute Javascript functions in a certain order

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related