迫使一个javascript函数等待运行，直到第一个完成

下午所有，我遇到了一个问题，我需要运行一个函数，然后完成后，运行下一个，并为四个函数执行此操作，我一直在这一段时间试图找到正确的语法布局我的函数调用，似乎无法找到任何东西来解决这个特定的情况。迫使一个javascript函数等待运行，直到第一个完成

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()); 

});

基本上我已经陆续跑出一个填满了一下每个函数执行完毕后，这反过来requries每个功能的加载条按照正确的顺序，所有的函数都能正常工作，缓存和ajax甚至css的变化都能正常工作。但我似乎无法找到一种方法来强制他们以正确的顺序，并等待运行，直到前一个完成为了恭维加载栏。有人有主意吗？

来源

2013-04-30 Nick

在函数1的末尾调用函数2。'function1（）{doStuff（）;函数2（）; }' – 2013-04-30 14:29:06

@RickViscomi是不是在这个例子中做什么？有很多其他方法我试图 – Nick 2013-04-30 14:31:47

您可以尝试同步调用ajax函数： http://api.jquery.com/jQuery。ajax /＃jQuery-ajax-settings – 2013-04-30 14:36:56

你想连锁异步函数调用。

使用jQuery的deffered.then方法：

AJAX功能，如$.ajax()，$.post()，$.get()，返回一个Deferred对象。通过包装一个Promise内装载机构

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抽象：

你可以在你的情况下使用。我搜索了一下，发现this gist（应该授予作者：Adam Luikart）。

来源

2013-04-30 14:36:26 LeGEC

非常感谢，看着你提供的东西。很多折衷 – Nick 2013-04-30 15:02:16

尝试使用回调函数。

而不是使用的CSS尝试使用.animation的（{ ''： ''}，200，函数（）{ “........这里的另一个功能......”} ）
同样的，作为淡出.fadeOut（200，函数（）{ “......这里的另一个功能.........”}）

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

希望有所帮助。

来源

2013-04-30 14:36:50 sanman

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

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

来源

2013-04-30 14:55:15

迫使一个javascript函数等待运行，直到第一个完成

回答

相关问题