Arrêter navigateur verrouillage pendant (synchrone) Ajax?

Ce que j'essaie de faire est d'ajouter un temps de chargement de l'image dans un div (de sorte que l'utilisateur sait quelque chose est en cours de chargement) et puis j'ai appeler une fonction ajax de jquery, qui est défini à "async: false". Voici mon code:

$jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
         type: "POST", /* this goesn't work with GET */
         url: urlValue, /*ex: "NBAgetGamesList.php" */
         data: parameters, /*ex: "param1=hello" */
         cache: false,
         async: false,
                     success: function(data){

                     }
});

Le problème est que le navigateur de serrures et de ne pas ajouter le chargement de l'image jusqu'à ce que APRÈS l'appel ajax est en fait ce qui est inutile, bien sûr. Firefox est le seul navigateur qui fait ajoute le chargement de l'image. IE, Chrome et Safari NE PAS ajouter le chargement de l'image.

Je sais navigateur de verrouillage se produit parce que async est défini à false, mais c'est ma seule option parce que je dois attendre pour cette demande avant de passer parce que j'ai besoin des données renvoyées.

Est-il un moyen de contourner cela? Si je place une alerte après l'-je ajouter le chargement de l'image qui fonctionne, mais je ne veux pas d'une alerte popping up à chaque fois.

Synchrone, par définition, est "blocage". Comment cela va affecter les navigateurs varie, mais généralement des blocs de DOM mises à jour et de l'interaction. Faire asynchrone à "régler le problème".
Pourquoi ne pas simplement faire asynchrone et de mettre le code à exécuter après ce dans une fonction distincte. Puis appeler la fonction dans le code de retour?
"parce que j'ai besoin de données qui est retourné." C'est ce que les rappels sont pour. Votre code ne doit pas être linéaire.
mettre ce code après cela? Epacscarello, il y a une fonction de rappel. Dans ce cas, il n'est besoin d'être linéaire, parce que je suis en attente de données puis-je utiliser ces données dans le prochain bloc de code.
ce qu'ils disent (et comme indiqué dans ma réponse), c'est que vous pouvez déplacer l'ensemble du prochain bloc de code dans le succès de rappel, ou le mettre dans une fonction distincte de ce que vous appelez de la réussite de rappel, et alors que le bloc peut utiliser les données renvoyées.

OriginalL'auteur Ray | 2012-03-18

  1. 12

    Malgré votre affirmation à l'effet contraire vous n'avez pas besoin à être synchrone. Tout ce que vous devez faire avec/après la réponse peut être fait dans le succès (et/ou de l'erreur ou complète) de rappel. Ainsi le changement:

    $jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: false,
   ...
});
//OTHER CODE

    être comme ceci:

    $jQuery("#playersListDiv").html(loadingImage);    
$jQuery.ajax({
   ...
   async: true,
   success: function(data) {
      //OTHER CODE
   }
});

    Ou déplacer "CODE" pour une fonction distincte de ce que vous appelez de la réussite de rappel.

    Si vous avez besoin de quelque chose de plus compliqué que ce que vous pouvez encapsuler dans une fonction et passer un rappel:

    function doAjaxStuff(callback) {
    $jQuery("#playersListDiv").html(loadingImage);    
    $jQuery.ajax({
       ...
       async: true,
       success: function(data) {
          //optional other processing here, then:
          callback(data);
       }
    });
}

//then from somewhere else in your code:
doAjaxStuff(function(data) {
   //do something with data
});
    C'est exactement ce que j'ai déjà. Un succès/fonction de rappel. Le navigateur est verrouillé jusqu'à ce que après la fonction de rappel est terminé.
    C'est pas ce que vous avez déjà: modifiez votre code pour async:true (ou omettez le paramètre entièrement et il devrait être par défaut à async : true).
    Désolé je n'étais pas clair. J'ai essayé le "async: true" à l'origine, et le code ne fonctionne même pas du tout. C'est la raison pourquoi je suis allé à faux dans la première place. Mon but était de trouver un moyen de faire ce travail avec "async: false".
    Vous ne pouvez pas. async:false verrouiller le navigateur, indépendamment de savoir si vous parvenez à obtenir l'image à afficher en premier. (Si vous n'avez pas de soins si le navigateur est verrouillé tant que l'image est affichée vous pouvez définir l'image avant d'appeler votre fonction, au lieu d'appeler la fonction directement utiliser setTimeout(yourFunction, 5); - le navigateur peut afficher l'image avant de commencer votre fonction. Mais vraiment, je ne pas recommandons à tous. Beaucoup mieux pour restructurer le code pour travailler avec une requête asynchrone.
    Ok merci pour votre aide, je vais restructurer mon code plus tard. Je pensais qu'il y aurait un moyen facile autour d'elle.

    OriginalL'auteur

  2. -1

    Ce que vous voulez est jQuery.Différé().

    OriginalL'auteur

  3. -1

    Je suis tombé sur ce problème et j'ai trouvé une solution pour elle.


    Supposons! vous êtes vraiment dans le besoin d'utiliser async : false dans votre ajax request et que vous voulez montrer à un chargement de l'Image pendant l'exécution de ajax demande. Mais ajax demande l'arrêt de toute autre INTERFACE utilisateur de l'opération (l'affichage du chargement de l'image) en raison de async : false. Donc, la solution la plus simple pour cela, Utilisez fadeIn à l'écran de chargement de l'image et fadeOut pour masquer le chargement de l'image.

    Ici est un jsFiddle démo qui contient un ajax demande avec async : false. Pour cette raison, le chargement de l'Image en n'affichant pas. (J'ai utilisé montrer méthode pour afficher le chargement de l'image.).

    Voici un autre jsFiddle avec fadeIn et fadeOut effet. Il affiche le chargement de l'image indépendamment de async : false dans ajax demande.

    OriginalL'auteur