jQuery Synchronous AJAX

A follow up from a previous question, I have a bit of code where an AJAX call is in a loop. The AJAX calls some PHP that creates a PDF and then emails that PDF. If there are multiple emails or multiple PDFs, these are looped, sending a single PDF to a single email address. I’m not sure why it was done that way, I didn’t write the initial code, just trying to trouble shoot it. I will also admit that I’m certainly no jquery ace either.

Anyways, here’s the issue. I had to set the AJAX call to synchronous as for some reason, when in a multiple PDF or Email situation, the first call wouldn’t complete as it appeared the next call to create a PDF would kill the first one. works when set to synchronous or works in a single PDF/email situation. Now then, of course in synchronous mode, the browser “freezes”. I’ve been trying to read through the jQuery docs, but not quite grasping how using asynchronous calls with callbacks can help. below is my current jQuery code, any ideas would be much appreciated.


if (!invalid_emails) { 			// Send To verified, continue!
	$("div#saving").show();
	$("div#form").hide();

	setTimeout(function() {
			// Get All Procedures that were selected
		$('.procselector:checked').each(function(index) {			// Loop through each checkbox
			for (var i=0; i< email_array.length; i++) {					// And send each one to all email addresses
					$.ajax({
						url:'/path/to/script/',
						type:'POST',
						cache:false,
						async:false,
						data:'mydata',
						beforeSend : function() {
							$("div#form").hide();
                                                        $("div#saving").show();
                                                }
						}).done(function(){
							$("div#saving").hide();
							$("div#done").show();
						});//close ajax function
			} // for email array loop
		}); // each loop
	},1000);
} // if !invalid emails