Question

我正在创建一个框架，允许我从一个普通的静态网站开始，然后如果用户启用了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插件，所以我可以分享它。如果这与我想要实现的目标有任何关系，我欢迎您的想法。

非常感谢提前。

Answer 1

我认为AJAX是您唯一一次担心JavaScript中没有按特定顺序运行的功能。

像AJAX这样的异步函数调用的技巧是利用回调。将“Doc ready”部分中的所有内容放入另一个可调用函数（或者只是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，async：false将不能用于“跨域请求和dataType：”jsonp“requests”，因此如果您正在调用其他域或使用可能是jsonp的域问题

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

1 个答案: