带有 jQ​​uery 异步 AJAX 调用的 while 循环 [英] While loop with jQuery async AJAX calls

问题描述

事情:我有一个页面，它必须显示不确定数量的图像，通过 AJAX(在服务器端使用 base64 编码)逐个加载.

The thing: I have a page, which has to display undetermined number of images, loaded through AJAX (using base64 encoding on the server-side) one by one.

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 操作.

The problem is that images (constructed with the renderImageData() function) are appended (all together) to the certain DIV only when all images are fetched. I mean, there is no any DOM manipulation possible until the loop is over.

我需要一张一张地加载和显示图像，因为可能有大量的图像，所以我无法堆叠它们，直到它们都被获取.

I need to load and display images one by one because of possible huge number of images, so I can't stack them until they all will be fetched.

推荐答案

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

Your best bet would be to restructure your code to use async ajax calls and launch the next call when the first one completes and so on. This will allow the page to redisplay between image fetches.

这也将使浏览器有机会喘口气并处理其他内务，而不是认为它可能被锁定或挂起.

This will also give the browser a chance to breathe and take care of its other housekeeping and not think that maybe it's locked up or hung.

而且，使用 async: 'false' 是个坏主意.我看不出为什么结构正确的代码不能在这里使用异步 ajax 调用，并且在您获取这些数据时不能挂起浏览器.

And, use async: 'false' is a bad idea. I see no reason why properly structured code couldn't use asynchronous ajax calls here and not hang the browser while you're fetching this data.

您可以像这样使用异步 ajax 来做到这一点:

You could do it with asynchronous ajax like this:

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() 实际上在调用下一个之前已经完成，因此从技术上讲它不是递归.

Also, while this may look like recursion, it isn't really recursion because of the async nature of the ajax call. getNextImage() has actually completed before the next one is called so it isn't technically recursion.

这篇关于带有 jQ​​uery 异步 AJAX 调用的 while 循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！