迫使一个JavaScript函数等待直到第一个完成 [英] forcing one javascript function to wait to run until the first has finished

问题描述

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

html：

 < div id =putcontenthereafterajax> ; 
< / div><！ -  end putcontenthereafterajax  - > 
 
< div id =putfooterhereafterajax> 
 

jquery：

 < code $ $（window）.load（function（）{
 
 
 function preload（arrayOfImages）{
 $（arrayOfImages）.each（function（）{
 $（'< img />'）[0] .src = this; 
 // alert（I cached+ this +）; 
}）; 
 $（'＃progressbarinner'）。css（width，200px）; //改变内部进度条的宽度div 
} 
 
 function changecss（）{
 $（'。hidetillcache'）。css（visibility，visible）; //使页面可见
 $（'＃loadingscreen'）。fadeOut（slow）; 
）
 
函数contentajax（）{
 $ .post（templates / content.php，
 {
 whatamidoing：imgettingthecontent
} ，
函数（data）{
 $（'＃putcontenthereafterajax'）。（''+ data +''）; 
 $（'＃progressbarinner'）。css（width， 400px）; //改变内部进度条的宽度div 
}）; 
} 
 
函数footerajax（）{
 $ .post（templates / footer.php，
 {
 whatamidoing：imgettingthefooter
}，
函数（数据）{
 $（'＃putfooterhereafterajax '）。之后（' '+数据+''）; 
 $（'＃progressbarinner'）。css（width，500px）; //改变内部进度条的宽度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更改都能正常工作。但我似乎无法找到一种方法来强制他们以正确的顺序，并等待运行，直到前一完成为了赞美加载栏。任何人有任何想法？

解决方案

您想链接异步函数调用。 b
$ b

使用jQuery的 deffered.then 方法：

ajax函数，如 $。ajax（）， $。post（）， $。get（），返回一个Deferred对象。

：

  function contentajax（）{
 //添加返回指令返回Deferred对象
返回$ .post（templates / content.php，{...}）; 
 
 
 function footerajax（）{
 // same here 
 return $ .post（templates / footer.php，{...}）; 
 
 
 //链接延期调用：
 contentajax（）
 .then（footerajax（））
 .then（csschanges（））
  

如果您还想等待加载完成图像，则仍然可以使用<$通过在一个 Promise 中封装加载机制，c $ c> Deferred >抽象。我搜索了一下，发现这个要点（应该给予作者应有的信誉： Adam Luikart ）。

Afternoon all, I am running into an issue where i need to run one function, then after that is finished, run the next, and do this for four functions, i have been at this for a while trying to find the correct syntax to layout my function calls in and cant seem to find anything to address this specific scenario.

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

});

basically i have a loading bar that fills up a bit after each function is finished which in turn requries each function to be ran one after another in the correct order, all the functions do work, the caching and the ajax and even the css changes work. however i cant seem to find a way to force them in the right order and to wait to run until the previous is finished in order to compliment the loading bar. Anyone have any ideas?

解决方案

You want to chain asynchronous function calls.

Use jQuery's deffered.then method :

ajax functions, like $.ajax(), $.post(), $.get(), return a Deferred object.

You can use this in your case :

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

If you also want to wait for the loading of the images to complete, you can still use this Deferred abstraction by wrapping the loading mechanism inside a single Promise. I googled around and found this gist (due credit should be given to the author : Adam Luikart).

这篇关于迫使一个JavaScript函数等待直到第一个完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！