En jQuery Form, 'succès' est appelé avant que 'beforeSubmit' soit terminé

Question

J'utilise le plugin jQuery Form pour télécharger une image. J'ai assigné une animation de fondu pour arriver au rappel beforeSubmit, mais comme je cours localement, il n'a pas le temps de finir avant que la fonction success soit appelée.

J'utilise une fonction de rappel dans mon appel fade(); pour m'assurer qu'un seul fondu se termine avant que le suivant ne commence, mais cela ne semble pas garantir que la fonction qui l'appelle est terminée.

Est-ce que je fais quelque chose de mal? Ne devrait pas beforeSubmit terminer avant que l'appel ajax est soumis?

Voici ce sont les deux callbacks:

beforeSubmit:

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

succès:

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

Answer 1

Je pense que vous pourriez recevoir trop de fantaisie avec les fanent animations:) ... Dans Le paramètre beforeSubmit le fadeOut est configuré, mais la fonction renvoie immédiatement l'envoi. Je suppose que le téléchargement est en cours sous 3 secondes causant l'apparition de la nouvelle image avant que vos animations sont terminées. Donc, si vous voulez vraiment vraiment cet effet, alors vous aurez besoin de faire le fondu de l'image, spinner fadein, et une fois que vous aurez terminé le téléchargement. Quelque chose comme ceci:

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

Même si le rappel beforeSubmit est appelé avant de soumettre la forme, la fonction userImage.fadeOut est synchrone (il engendre un thread séparé d'exécution pour exécuter l'animation de fondu puis il continue l'exécution) et il revient immédiatement. L'animation de fondu dure 1,5 secondes et lorsque vous exécutez localhost, la réponse ajax est renvoyée plus vite que 1,5 seconde et vous ne verrez donc pas l'animation, dans les applications du monde réel il est peu probable que les requêtes ajax durent moins de 1,5 seconde , donc vous êtes bon :)