Tandis que la boucle avec jQuery async appels AJAX

La chose:
J'ai une page qui doit afficher nombre indéterminé d'images, chargé via AJAX (à l'aide de l'encodage base64 sur le côté serveur), un par un.

var position = 'front';
while(GLOB_PROCEED_FETCH)
{
    getImageRequest(position);
}

function getImageRequest(position)
{
    GLOB_IMG_CURR++;
$.ajax({
        url: urlAJAX + 'scan=' + position,
        method: 'GET',
        async: false,
        success: function(data) {
            if ((data.status == 'empty') || (GLOB_IMG_CURR > GLOB_IMG_MAX))
            {
                GLOB_PROCEED_FETCH = false;
                return true;
            }
            else if (data.status == 'success')
            {
                renderImageData(data);
            }
        }
    });
}

Le problème est que les images (construit avec le renderImageData ()) sont ajoutés (tous ensemble) à la DIV uniquement lorsque toutes les images sont extraites. Je veux dire, il n'y a aucune manipulation du DOM possible jusqu'à ce que la boucle est terminée.

J'ai besoin de charger et d'afficher les images une par une en raison de la possible nombre énorme d'images, donc je ne peux pas la pile jusqu'à ce qu'ils tous seront extraites.

Vous êtes à partir d'une requête dans la boucle while et la demande commence une autre demande si data.status == 'success' et qu'aucune demande lors de la configuration de GLOB_PROCEED_FETCH = false qui est la condition de la boucle while. Quelle est donc la raison pour la boucle while?
Fixe le code initial

OriginalL'auteur Aleksandr Shumilov | 2013-10-12

  1. 24

    Votre meilleur pari serait de restructurer votre code pour utiliser asynchrone appels ajax et de lancer l'appel suivant lorsque le premier est terminé et ainsi de suite. Cela permettra à la page pour l'afficher de nouveau entre l'image récupère.

    Cela donnera à votre navigateur une chance de respirer et de prendre soin de ses autres entretien ménager et ne pas penser que c'est peut-être verrouillé ou accroché.

    Et, de l'utilisation async: 'false' est une mauvaise idée. Je ne vois pas pourquoi correctement structuré code ne pouvais pas utiliser asynchrone appels ajax ici et de ne pas accrocher le navigateur pendant que vous êtes à l'extraction de ces données.

    Vous pourriez le faire avec ajax asynchrone comme ceci:

    function getAllImages(position, maxImages) {
    var imgCount = 0;

    function getNextImage() {
        $.ajax({
            url: urlAJAX + 'scan=' + position,
            method: 'GET',
            async: true,
            success: function(data) {
                if (data.status == "success" && imgCount <= maxImages) {
                    ++imgCount;
                    renderImageData(data);
                    getNextImage();
                }
            }
        });
    }
    getNextImage();
}

//no while loop is needed
//just call getAllImages() and pass it the 
//position and the maxImages you want to retrieve
getAllImages('front', 20);

    Aussi, même si cela peut ressembler à de la récursivité, il n'est pas vraiment la récursivité en raison de la nature asynchrone de l'appel ajax. getNextImage() a effectivement terminée avant que l'autre est appelé ainsi, il n'est pas techniquement la récursivité.

    while(GLOB_PROCEED_FETCH) { setTimeout(getImageRequest(position, 1); } - vous l'intention de faire des demandes en boucle sans appel récursif dans le "succès" de gestionnaire?
    J'ai ajouté un exemple de code utilisant AJAX asynchrone qui est beaucoup mieux.
    Je ne peux pas mettre le "async: true", parce que le nombre désiré d'appels AJAX est indéterminé - si j'ai mis "async: true", il produit un grand nombre d'appels AJAX dans le début, tout GLOB_PROCEED_FETCH n'est pas définie.
    merci de regarder mon code d'exemple. Il n'utilise pas la boucle while. Il lance le prochain appel ajax lors de la précédente réussit et s'arrête lorsqu'il atteint le max d'images ou de ne pas obtenir le succès. Il peut fonctionner avec async: true.
    Aussi, pertinente à ce problème est que getNextImage() s'exécute, commence l'appel ajax et se termine l'exécution tout en un rapide moment. L'ajax success gestionnaire est appelé quelque temps plus TARD, après l'invocation de getNextImage() est déjà terminée. Ainsi, lors de la prochaine invocation de getNextImage() est appelé à partir de la success gestionnaire, il n'y a pas de stack frame build-up, comme la pile a déjà déroulé de l'appel précédent à getNextImage() finition exécution - ce n'est pas vraiment classique de la récursivité. Donc, il n'y a pas de fuite de mémoire ou de construire avec cette construction.

    OriginalL'auteur jfriend00

  2. -2

    Mal et le mal. Ne pas user de minuteries, de ne pas la chaîne. Regarder jQuery Différé /quand il a tout ce dont vous avez besoin.

    var imgara = [];
for (image in imglist) {
  imgara[] = ajax call
}
$.when.apply($, imgara).done(function() {
  //do something
}).fail(function() {
  //do something else
});
    Si vous lisez l'OP de la question avec soin, ce n'est PAS la façon de résoudre le cas des OP question. Ils disent: j'ai besoin de charger et d'afficher les images une par une en raison de la possible nombre énorme d'images, donc je ne peux pas la pile jusqu'à ce qu'ils seront tous les cheveux.. L'OP veut aussi ajouter des images, dans l'ordre, comme ils sont récupérés (ne pas attendre jusqu'à ce que tout est fait et en les ajoutant dans l'ordre). Votre suggestion ne pas répondre à aucune de ces exigences.
    En fait, si vous apprenez à utiliser le reportés correctement, vous pouvez faire exactement ce que l'OP décrit et la poignée de chaque image comme il est extrait. Je pense que vous devez être une minuterie écrivain, en espérant que l'.5 secondes par image estimé ne manquera jamais. Le code ci-dessus n'était pas une réponse, parce que je n'ai pas de réponse à "givz moi le codez" questions, il a été un exemple pour l'orienter dans la bonne direction.
    Chris est le problème avec ce site.

    OriginalL'auteur Chris Caviness

  3. -3

    Essayez d'utiliser setInterval() fonction au lieu de while().

    var fetch = setInterval(loadImage, 2000);

function loadImage(){
    position= new position; //Change variable position here.
    getImageRequest(position);
    if(!GLOB_PROCEED_FETCH){
          clearInterval(fetch);
    }
}
    Comment est-ce jamais s'arrêter? Il ne s'arrêtera jamais. Il ne l'observe pas tout arrêter les conditions de l'OP du code. Aussi, si vous utilisez ajax asynchrone (ce qui n'est pas verrouiller le navigateur), il n'y a pas de raison d'utiliser une minuterie.
    Belle observation. À l'aide de la fonction clearInterval que maintenant. Je vous remercie.
    Merci!!!! Il fonctionne, mais de toute façon il encore de rendu des images étrangement - il les rend par des ensembles de deux ou trois images. Je veux dire que dans le début, TOUTES les images ont été rendus à la fin, maintenant, ils sont rendus par des ensembles de nombre aléatoire.
    L'augmentation de votre intervalle peut fournir à votre navigateur de plus de temps pour respirer. Mais je ne pense pas que, ce qui les rend par des ensembles de nombre aléatoire serait un problème, ses beaux-droit?
    Merci encore une fois! En fait ouais, quant à elle, ne causera pas de problème avec la logique

    OriginalL'auteur Optimus Prime