Obliger une fonction javascript à attendre jusqu'à ce qu'elle soit terminée

Après-midi, je me heurte à un problème où j'ai besoin d'exécuter une fonction, puis, après cela, finis, exécutez la suite, et faites-en pour quatre fonctions, j'ai été pendant un certain temps en essayant de trouver la syntaxe correcte à la mise en page Ma fonction appelle et ne semble rien trouver pour résoudre ce scénario spécifique.

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

Fondamentalement, j'ai une barre de chargement qui se remplit un peu après la fin de chaque fonction, qui nécessite chaque fonction d'être exécutée l'une après l'autre dans l'ordre correct, toutes les fonctions fonctionnent, la mise en cache et l'ajax et même les changements css fonctionnent . Mais je ne peux pas trouver un moyen de les forcer dans le bon ordre et d'attendre de courir jusqu'à ce que la précédente soit terminée afin de compléter la barre de chargement. Quelqu'un a-t-il des idées?

Vous souhaitez chaîner des appels de fonctions asynchrones .

Utilisez la méthode de jQuery reportée .

Ajax fonctionne, comme $.ajax() , $.post() , $.get() , renvoyez un objet différé.

Vous pouvez utiliser ceci dans votre cas:

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

Si vous souhaitez également attendre le chargement des images, vous pouvez toujours utiliser cette abstraction Deferred en enveloppant le mécanisme de chargement dans une seule Promise . J'ai googlé autour et trouvé ce gist (le crédit devrait être donné à l'auteur: Adam Luikart ).

Essayez d'utiliser la fonction de rappel.

Au lieu d'utiliser .css, essayez d'utiliser .animation ({'': ''}, 200, function () {"…….. une autre fonction ici ……"})
Même avec fadeOut comme .fadeOut (200, function () {"….. une autre fonction ici ………"})

Donc, à la fin, vous allez appeler contentajax ().

J'espère que cela pourra aider.

Par défaut, vos appels ajax sont asynchrones. Vous ne pouvez pas garantir l'ordre des retours asynchrone. Il semble que vous souhaitiez une exécution par ordre synchrone. Utilisez soit l'asynchrone: faux dans vos appels ajax, soit utilisez chaque fonction suivante comme un rappel de succès vers le courant et ne les faites pas dans la précharge.

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