Javascript 使用jQuery异步AJAX调用进行While循环

事情是： 我有一个页面，它必须显示不确定数量的图像，通过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);

函数获取图像（位置、最大值）{
var imgCount=0；
函数getNextImage（）{
$.ajax({
url:urlAJAX+“扫描=”+位置，
方法：“GET”，
async:true，
成功：功能（数据）{
如果（data.status==“success”&&imgCount尝试使用
setInterval（）
函数而不是
while（）

错误和错误。不要使用计时器，不要链接它们。看看jQuery Deferred/when，它拥有您所需要的一切

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

虽然（GLOB_procedue_FETCH）{setTimeout（getImageRequest（position），1）；}-您的意思是在循环中执行请求，而不在“success”处理程序中递归调用？@AlexShumilov-我添加了一个使用异步AJAX的代码示例，这要好得多。我无法设置“async:true”，因为所需AJAX调用的数量尚未确定-如果我设置为“async:true”，它在开始时会产生大量AJAX调用，而GLOB\u procedue\u FETCH没有设置。@AlexShumilov-请看我的代码示例。它不使用while循环。它在上一个AJAX调用成功时启动下一个AJAX调用，在到达最大映像或未成功时停止。它可以与
异步：true
@robisr一起工作ob-另外，与此问题相关的是，
getNextImage（）
运行、启动ajax调用并在一瞬间完成执行。ajax
success
处理程序在调用
getNextImage（）
是从
success
处理程序调用的，没有堆栈帧构建，因为堆栈已经从先前对
getNextImage（）的调用中展开
finishing execution-这不是真正的经典递归。因此，使用此构造不会出现内存泄漏或累积。您在while循环中启动一个请求，如果
data.status==“success”
则此请求会启动另一个请求，如果设置
GLOB\u procedue\u FETCH=false，则没有请求，这是条件在while循环上。那么while循环的原因是什么呢？修复了初始代码该如何停止？它将永远继续。它不会观察OP代码的任何停止条件。另外，如果使用异步ajax（不会锁定浏览器），也没有理由使用计时器。@jfriend00观察得很好。使用现在添加的clearInterval。谢谢。谢谢！它工作正常，但不知何故它仍然以奇怪的方式渲染图像-它以两个或三个图像集的方式渲染图像。我的意思是，在一开始，所有图像都是在最后渲染的，现在它们是以两个或三个图像集的方式渲染的随机数。增加间隔可能会给你的浏览器提供更多的喘息时间。但我不认为，用随机数集渲染它们会有任何问题，对吗？再次感谢！事实上，是的，如果你仔细阅读OP的问题，就不会引起逻辑问题而言，这不是解决OP问题的方法。They说：我需要一个接一个地加载和显示图像，因为可能会有大量图像，所以我无法将它们堆叠起来，直到它们都被提取出来。OP还希望在提取图像时按顺序追加图像（不要等到一切都完成并按顺序追加）。您的建议不符合任何这些要求。事实上，如果您学会如何正确使用延迟，您可以完全按照OP所描述的操作，并在检索每个图像时对其进行处理。我认为您一定是一个计时器编写者，希望估计的每个图像0.5秒不会失败。上面的代码不是答案，因为我不回答“givz me the codez”的问题，这是一个为他指明正确方向的例子。Chris是这个网站的问题所在。
var imgara = [];
for (image in imglist) {
  imgara[] = ajax call
}
$.when.apply($, imgara).done(function() {
  // do something
}).fail(function() {
  // do something else
});