事情是:我有一个页面,其中必须显示未确定数量的图像,这些页面是通过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调用,并且在获取此数据时不会挂起浏览器。
async: 'false'
您可以使用异步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()在下一个调用之前实际上已经完成,因此从技术上讲它不是递归。
getNextImage()