Цикл While с вызовами jQuery async AJAX

вещь: У меня есть страница, которая должна отображать неопределенное количество изображений, загруженных через AJAX (используя кодировку base64 на стороне сервера) один за другим.

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);
            }
        }
    });
}

проблема в том, что изображения (построенные с помощью функции renderImageData ()) добавляются (все вместе) к определенному DIV только при извлечении всех изображений. Я имею в виду, что нет никакой возможной манипуляции DOM, пока цикл не закончится.

Мне нужно загружать и отображать изображения один за другим из-за возможно огромное количество изображений, поэтому я не могу складывать их, пока они все не будут извлечены.

8
ajax append dom javascript jquery

3 ответов

лучше всего было бы реструктурировать код для использования асинхронных вызовов ajax и запустить следующий вызов, когда первый завершится и так далее. Это позволит странице redisplay между выборками изображений.

Это также даст браузеру возможность дышать и заботиться о своем другом домашнем хозяйстве и не думать, что, возможно, он заперт или повесил.

и, используйте async: 'false' - это плохая идея. Я не вижу причин, почему правильно структурированный код не может использовать асинхронный ajax звонки здесь и не повесить браузер, пока вы получаете эти данные.

вы можете сделать это с асинхронным ajax следующим образом:

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);

кроме того, хотя это может выглядеть как рекурсия, на самом деле это не рекурсия из-за асинхронного характера вызова ajax. getNextImage() фактически завершено до вызова следующего, поэтому технически это не рекурсия.

22

неправильно и неправильно. Не используйте таймеры, не связывайте их. Посмотрите на jQuery Deferred / when, у него есть все, что вам нужно.

var imgara = [];
for (image in imglist) {
  imgara[] = ajax call
}
$.when.apply($, imgara).done(function() {
  // do something
}).fail(function() {
  // do something else
});
-2

попробуйте использовать

-3