jQuery异步AJAX调用的While循环

Z时代
2024-01-10
分类：问答

事情是：我有一个页面，其中必须显示未确定数量的图像，这些页面是通过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操作。

由于可能会有大量的图像，因此我需要一张一张地加载和显示图像，因此我无法将它们堆叠起来，直到将它们全部取出为止。

回答：

最好的选择是重组代码以使用异步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);