while循环使用jQuery异步AJAX调用

Question

事情:我有一个页面,它必须显示未确定数量的图像,通过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操作可能.

我需要逐个加载和显示图像,因为可能有大量的图像,所以我不能将它们堆叠起来,直到它们都被取出.

Answer 1

您最好的选择是重构代码以使用异步ajax调用,并在第一个调用完成时启动下一个调用,依此类推.这将允许页面在图像提取之间重新显示.

这也将使浏览器有机会呼吸并照顾其他家务,而不是认为它可能被锁定或挂起.

并且,使用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()实际上已经在下一个调用之前完成,所以它不是技术上的递归.