Question

下午所有，我遇到了一个问题，我需要运行一个函数，然后完成后，运行下一个，并为四个函数执行此操作，我已经在这一段时间试图找到正确的布局我的函数调用的语法，似乎无法找到解决此特定方案的任何内容。

html：

<div id = "putcontenthereafterajax">
</div><!--end putcontenthereafterajax-->

<div id = "putfooterhereafterajax">
</div<!--end putfooterhereafterajax-->

jquery的：

$(window).load(function() { 


function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        //alert("I cached "+this+"");
    });
    $('#progressbarinner').css("width","200px");//change the width of the inner progress bar div
}

function changecss(){
    $('.hidetillcache').css("visibility","visible");//make the page visible
    $('#loadingscreen').fadeOut("slow");
}

function contentajax(){
    $.post("templates/content.php",
    {
        whatamidoing:"imgettingthecontent"
    },
    function(data){
        $('#putcontenthereafterajax').after(''+data+'');
        $('#progressbarinner').css("width","400px");//change the width of the inner progress bar div
    });
}

function footerajax(){
    $.post("templates/footer.php",
    {
        whatamidoing:"imgettingthefooter"
    },
    function(data){
        $('#putfooterhereafterajax').after(''+data+'');
        $('#progressbarinner').css("width","500px");//change the width of the inner progress bar div
    }); 
}

preload([
    'images/careers.jpg',
    'images/careers.png',
    'images/contact.jpg',
    'images/facebook.png',
    'images/footer.png',
    'images/footerblack.png',
    'images/footergrey.png',
    'images/home.jpg',
    'images/media.jpg',
    'images/media.png',
    'images/myitv3.jpg',
    'images/newindex.jpg',
    'images/newindex.png',
    'images/services.jpg',
    'images/twitter.png'
], contentajax(), footerajax(), csschanges());

});

基本上我有一个加载条，在每个函数完成后填充一点，反过来要求每个函数以正确的顺序一个接一个地运行，所有函数都可以工作，缓存和ajax甚至是css改变了工作。但是，我似乎无法找到一种方法强制他们按正确的顺序，并等待运行，直到前一个完成，以赞美加载栏。有人有什么想法吗？

Answer 1

您希望链接异步函数调用。

使用jQuery的deffered.then方法：

ajax函数，如$.ajax()，$.post()，$.get()，返回一个Deferred对象。

你可以在你的情况下使用它：

function contentajax(){
    // add the return instruction to return the Deferred object
    return $.post("templates/content.php", {... });
}

function footerajax(){
    //same here
    return $.post("templates/footer.php", { ... }); 
}

// chain the deferred calls :
contentajax()
   .then( footerajax() )
   .then( csschanges() )

如果您还想等待加载图像完成，您仍然可以通过将加载机制包装在单个Deferred内来使用此Promise抽象。我用Google搜索了this gist（应该给予作者应有的信任：Adam Luikart）。

Answer 2

尝试使用回调函数。

而不是使用.css尝试使用.animation（{''：''}，200，function（）{“........另一个函数在这里......”}）
与fadeOut相同.fadeOut（200，function（）{“.....这里的另一个函数.........”}）

所以最后你只会调用contentajax（）。

希望有所帮助。

Answer 3

默认情况下，您的ajax调用是异步的。您无法保证返回异步的顺序。听起来你想要以同步顺序执行。要么使用 async：false 在你的ajax调用中，或者使用每个下一个函数作为当前函数的成功回调，并且不要在preload中循环它们。

        success: function(data, textStatus, jqXHR)
        {
                successCallback(successCallbackArgs);
        }

强制一个javascript函数等待运行，直到第一个完成

3 个答案: