了解如何按特定顺序执行Javascript函数

Question

我正在创建一个框架，该框架允许我从一个普通的静态网站开始，然后如果用户启用了Javascript，则会将其转换为单个页面网站，从静态页面当用户浏览网站时。

我还在工作的想法，但我挣扎了解如何按照一定的顺序我的代码（编辑）执行JavaScript函数看起来是这样的：

编辑我的更详细信息代码：

当loadSiteMap（）函数完成可变地图看起来是这样的：

{ 
    "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插件，以便我可以分享它。如果这对我现在想达到的目标有任何影响，我欢迎你的想法。

非常感谢提前。

Answer 1

我认为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 
    } 
}); 

另外，根据here，异步：如果是你，：false将不会在“‘JSONP’请求跨域请求和数据类型的工作我们正在调用一个不同的域名或者使用jsonp来解决这个问题。