[英]While loop with jQuery async AJAX calls
事情是:我有一个页面,其中必须显示未确定数量的图像,这些页面是通过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);
同样,尽管这看起来像递归,但由于ajax调用的异步特性,它并不是真正的递归。 getNextImage()
实际上在调用下一个之前就已经完成,因此从技术上讲它不是递归的。
对与错。 不要使用计时器,不要链接它们。 查看jQuery Deferred /何时,它具有您需要的一切。
var imgara = [];
for (image in imglist) {
imgara[] = ajax call
}
$.when.apply($, imgara).done(function() {
// do something
}).fail(function() {
// do something else
});
尝试使用setInterval()
函数代替while()
。
var fetch = setInterval(loadImage, 2000);
function loadImage(){
position= new position; //Change variable position here.
getImageRequest(position);
if(!GLOB_PROCEED_FETCH){
clearInterval(fetch);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.