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

【问题标题】：forcing one javascript function to wait to run until the first has finished强制一个 javascript 函数等待运行，直到第一个函数完成
【发布时间】：2013-04-30 14:26:23
【问题描述】：

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

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更改工作。但是我似乎无法找到一种方法来强制它们以正确的顺序运行并等待运行直到前一个完成以补充加载栏。有人有什么想法吗？

【问题讨论】：

在函数1结束时调用函数2。function1() { doStuff(); function2(); }
@RickViscomi 这不是我在这个例子中所做的吗？我尝试过许多其他方法
你可以尝试同步调用ajax函数：api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
这真的让我很恼火，没有简单的方法可以做到这一点，在 php 中我可以按照我需要调用它们的顺序列出函数......但 javascript 似乎喜欢一次运行所有内容
听起来您希望以同步顺序执行。在 ajax 调用中使用 async: false ，或者使用每个 next 函数作为对当前函数的成功回调，并且不要在预加载中循环它们。成功：函数（数据，textStatus，jqXHR）{successCallback（successCallbackArgs）； }

标签： javascript jquery function timing

【解决方案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() )

如果您还想等待图像加载完成，您仍然可以通过将加载机制包装在单个 Promise 中来使用此 Deferred 抽象。我四处搜索，发现this gist（应归功于作者：Adam Luikart）。

【讨论】：

非常感谢，请仔细查看您提供的内容。非常感谢

【解决方案2】：

尝试使用回调函数。

尝试使用 .animation({'':''},200,function(){"........another function here......"}) 而不是使用 .css李>
fadeOut 与 .fadeOut(200,function(){".....another function here........."}) 相同

所以最后你只会调用 contentajax()。

希望对您有所帮助。

【讨论】：

【解决方案3】：

默认情况下，您的 ajax 调用是异步的。您不能保证异步返回的顺序。听起来您希望以同步顺序执行。要么使用异步：假在您的 ajax 调用中，或将每个 next 函数用作当前函数的成功回调，并且不要在 preload 中循环遍历它们。

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

【讨论】：