ajax loop wait for finish

Question

I have an ajax call inside a loop:

$.each(chunkedImages, function(index, image) {
    $.ajax({
        type: 'POST',
        url: url,
        data: {images: image, key: key},
    }).success(function( data ) {
        countConvertedImages += data;

        if( index === chunkedImages.length-1 ) {
            console.log( countConvertedImages );
        }
    });

});

My problem is that the "countConvertedImages" variable is not up to date. There is not the correct value inside, for some reason. I think it has to do with the order of the ajax calls because they might not be finished.

How can I output something after all ajax calls have finished?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Alon Eitan, Jun 30 '19 at 20:17

score 0 · Answer 1 · answered Jun 30 '19 at 20:55

Use $.when as mention below

 $.when(
                $.each(chunkedImages, function (index, image) {
                    $.ajax({
                        type: 'POST',
                        url: url,
                        data: { images: image, key: key },
                        success: function (data) {
                            countConvertedImages += data;
                            if (index === chunkedImages.length - 1) {
                                console.log(countConvertedImages);
                            }
                        }
                    })
                })
            ).done(function () {
            });

score 0 · Accepted Answer · answered Jul 01 '19 at 22:04

Thank you for the link: How do I return the response from an asynchronous call?

Which leads me to the right solution for me using .ajaxStop()

$(document).one("ajaxStop", function() {
    ...
});

was the way to go for me: https://api.jquery.com/ajaxStop/

ajax loop wait for finish

2 Answers2