AJAX dual asynchronous function function

Question

So, I'm trying to write a javascript script to dynamically load pages on my site without refreshing the page. Basically, I have a function that fades out the contents of a div, loads new content, switches the content, and then disappears. Content is loaded using an asynchronous AJAX request, which, when successful, calls a function that disappears in the content. The fadein function should not work until the load functions and the fadeout function are executed. I want the page to load all the time when the content fades, but now my fading animation is freezing. I tried a bunch of different ways to figure this out, but so far nothing is working ...

Any ideas?

Answer 1

It is just a matter of waiting for the completion of two events and, when they are both full, take action. See my answer to this other question . Primarily:

You have a flag for each event, initially false. Pick up the two events in question (animation completion callback and ajax success). Each event sets its flag and calls a function. This function checks the flags: if both are set, it does something (in your case, it installs new content). See the link for sample code.

Answer 2

I have a website that does something similar. The function for popping, replacing content, and pasting is as follows:

var loadAnAjaxArticle = function (url) { var removeParentArticle = function () { // I don't like doing this, but so far haven't found a // particularly elegant way to replace the article // when calling load(), only append it. $('article').first().html($('article').last().html()); }; var showArticle = function (response, status, xhr) { if (status == "error") { $('article').first().html('<h2>There was an error processing your request.</h2>'); $('article').first().slideDown('slow'); } else { removeParentArticle(); $('article').first().slideDown('slow'); } }; var loadArticle = function () { $('article').first().load(url + ' article', showArticle); }; $('article').first().slideUp('slow', loadArticle); } 

Basically, it calls .slideUp to hide the contents, providing feedback to another function. This function calls .load to update the content, providing feedback to another function. This function manipulates the DOM a bit to make it look right (it is at an early stage of development, I haven’t made it more elegant yet) and calls .slideDown to show the contents again.

This is easy to do in this case, because each function used takes a callback. If the functions you use have the same capability, you should be able to chain them that way.

Answer 3

You just need to set a flag and perform both completion functions to check if both events are completed. Whatever the completion function detects that both actions are completed, launches the next action.

You did not tell us any specifics of your code, but here is the general idea:

 function loadNewPage(args) { var fadeDone = false; var ajaxData; function processAjaxDataWhenReady() { // if both have completed, then process the ajaxData and start the fadeIn if (fadeDone && ajaxData) { // process the ajaxData here $("#myContent").fadeIn(); } } // start the fadeOut $("#myContent").fadeOut(function() { fadeDone = true; processAjaxDataWhenReady(); }); // start the ajax call $.ajax({...}, function(data) { ajaxData = data; processAjaxDataWhenReady(); }) }