Le problème: Je télécharge des images via JavaScript sur une page de serveur asp.net. Pour calculer l'opération progressive pour chaque téléchargement d'image, j'ai conçu que chaque image a une demande indépendante . Mais j'ai peur que cela puisse surcharger le serveur, surtout si le nombre de requêtes est important.

L'idée: Plutôt que d'envoyer toutes les demandes de manière asynchrone, je souhaite les envoyer par paquets de trois.
Une fois que ces trois sont envoyés et que toutes les autres demandes doivent attendre la fin de ces trois.

La question:

Comment puis-je faire attendre les autres demandes jusqu'à ce que les précédentes se terminent?

Le code:

for (var i = 0; i < inputFiles.files.length; i++) {
    (function (i) {                
        var request = new XMLHttpRequest();

        request.open('POST', 'Ajax.ashx');
        request.setRequestHeader('Cashe-Control', 'no-cashe');

        var data = new FormData();
        data.append('file[]', inputFiles.files[i]);

        request.upload.addEventListener('progress', function (event) {//happening
            if (event.lengthComputable) {
                var percent = parseFloat(event.loaded) / parseFloat(event.total), 
                    progressWidth = percent * parseFloat(progressBarWidth);
                progressBar.children().css('width', progressWidth + 'px');
            } else {}
        });
        request.upload.addEventListener('load', function (event) {});
        request.upload.addEventListener('error', function (event) {});
        request.addEventListener('readystatechange', function (event) {
            if (this.readyState == 4) {
                if (this.status == 200) {
                    var code = eval(this.response);
                } else {}
            }
        });
        request.send(data);
    })(i);
}
0
Mohammed K. Abushawish 17 juil. 2015 à 07:37

2 réponses

Meilleure réponse

Étant donné que vous avez ajouté la balise jQuery, vous pouvez:

  • créer des requêtes n $.ajax()
  • attendez avec l'aide de $.when() qu'ils soient tous résolus
  • puis envoyez les n requêtes suivantes

Quelque chose comme ça:

function uploadImages(images) {
    var requests = [];

    // upload 3 images (or less, if there are less images in the array)
    for (var i = 0, len = Math.min(3, images.length); i < len; i++) {
        var image = images.pop(),
            formData = new FormData(),
            request, formData = new FormData();

        formData.append('file[]', image);

        request = $.ajax({
            url: "Ajax.ashx",
            type: "POST",
            data: formData,
            processData: false,
            beforeSend: function (xhr) {
                // add progress stuff
                // http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/
            },
            success: function (data) { }
        });

        requests.push(request);
    }

    // when all our requests have finished and there are images left, start the next round...
    $.when.apply($, requests).done(function () {
        if (images.length) {
            uploadImages(images);
        }
    });
}

Exemple simplifié

0
Andreas 17 juil. 2015 à 05:37

La solution: J'utilisais jquery version 1.4 donc cela ne fonctionnait pas. Maintenant, je travaille sur la version 1.11 et tout est bien fait.

$ .when.apply () fonctionne uniquement avec jQuery 1.5 ou version ultérieure.

0
Mohammed K. Abushawish 21 juil. 2015 à 09:35