jquery - forcing one javascript function to wait to run until the first has finished - Stack Overflow

admin管理员组

文章数量:1416651

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 pliment the loading bar. Anyone have any ideas?

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 pliment the loading bar. Anyone have any ideas?

• javascript
• jquery
• function
• timing

Share Improve this question Follow asked Apr 30, 2013 at 14:26 NickNick 21311 gold badge55 silver badges1313 bronze badges 5

• Call function 2 at the end of function 1. function1() { doStuff(); function2(); } – Rick Visi Commented Apr 30, 2013 at 14:29
• @RickVisi is that not what im doing in this example? there are numerous other ways i have attempted – Nick Commented Apr 30, 2013 at 14:31
• You could try calling the ajax functions synchronously: api.jquery./jQuery.ajax/#jQuery-ajax-settings – Chris Kissinger Commented Apr 30, 2013 at 14:36
• It really irritates me that there is no simple way to do this, in php i can just list the function in the order i need them called... but javascript seems to like to run everything at once – Nick Commented Apr 30, 2013 at 14:41
• It sounds like you want execution in synchronous order. Either use async: false in your ajax calls, or use each next function as a success callback to the current one and don't loop through them in preload. success: function(data, textStatus, jqXHR) { successCallback(successCallbackArgs); } – Chris Kissinger Commented Apr 30, 2013 at 14:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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 plete, 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).

Try to use callback function.

• Instead of using .css try using .animation({'':''},200,function(){"........another function here......"})
• Same with fadeOut as .fadeOut(200,function(){".....another function here........."})

So at the end you will only call contentajax().

Hope that helps.

By default your ajax calls are async. You can't guarantee the order of returns async. It sounds like you want execution in synchronous order. Either use async: false in your ajax calls, or use each next function as a success callback to the current one and don't loop through them in preload.

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

本文标签： jqueryforcing one javascript function to wait to run until the first has finishedStack Overflow