In jQuery Form, 'success' is being called before 'beforeSubmit' is finished

Question

I'm using the jQuery Form plugin to upload an image. I've assigned a fade animation to happen the beforeSubmit callback, but as I'm running locally, it doesn't have time to finish before the success function is called.

I am using a callback function in my fade(); call to make sure that one fade completes, before the next one begins, but that does not seem to guarantee that the function that's calling it is finished.

Am I doing something wrong? Shouldn't beforeSubmit complete before the ajax call is submitted?

Here's are the two callbacks:

beforeSubmit:

function prepImageArea() {
   if (userImage) {
     userImage.fadeOut(1500, function() {
       ajaxSpinner.fadeIn(1500);
   });
 }
}

success:

function imageUploaded(data) {
  var data = evalJson(data);
  userImage.attr('src', data.large_thumb);
  ajaxSpinner.fadeOut(1500, function() {
    userImage.fadeIn(1500);
});

}

Answer 1

I think you may be getting too fancy with those fade animations :)... In the beforeSubmit the fadeOut is setup but the function returns immediately causing the submit to happen. I guess the upload is happening under 3 seconds causing the new image to appear before your animations are complete.

So if you really really want this effect, then you will need to do the image fadeout, spinner fadein, and once that is complete triggering the upload. Something like this:

if (userImage) {
  userImage.fadeOut(1500, function() {
    ajaxSpinner.fadeIn(1500, function(){
        //now trigger the upload and you don't need the before submit anymore
    });
  });
}
else {
   // trigger the upload right away
}

Answer 2

Even though the beforeSubmit callback is called before submitting the form, the userImage.fadeOut function is synchronous (i.e. it spawns a separate thread of execution to execute the fade animation then it continues execution) and it returns immediately. The fade animation takes 1.5 seconds to complete and as you are running on localhost the ajax response is returned faster than 1.5 seconds and thus you won't see the animation, in real world applications it mostly unlikely that ajax requests would take less than 1.5 seconds, so you are good :)