Javascript 如何在Ajax请求期间正确加载HTML

我有一些基本的Ajax代码，它调用了一个名为remove\u exterx\u images\u new.PHP的PHP页面，如下所示

var done = false,
    offset = 0,
    limit = 20,
    my_num = 0;

while (!done) {
    var url = "read_images.php?offset=" + offset + "&limit=" + limit + "&my_num=" + my_num;

    $.ajax({
        async: false,
        url: url
    }).done(function(response) {

        if (response.processed !== limit) {
            // asked to process 20, only processed <=19 - there aren't any more
            done = true;
        }
        my_num = response.my_num
        offset += response.processed;
        if(response.table_data != '') {
            $('#myTable > tbody:last').append(response.table_data);
        }
        $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " images.</span>");
        console.log(response)
    }).fail(function(jqXHR, textStatus) {

        $("#mybox").html("Error after processing " + offset + " images. Error: " + textStatus);

        done = true;
    });
}

---

这个请求工作得很好，可以处理数千张图像。唯一的问题是，当表行被附加到主页内的表（remove_oversex_images_new.php）时，链接在ajax请求完成之前不会处于活动状态。问题是，用户可能希望在请求仍在进行时删除图像或其他内容。有没有办法绕过这个问题？在请求完成之前，remove\u oversex\u images\u new.php上的所有链接都不起作用，我希望所有HTML都能在请求仍在处理中时起作用。

您需要在javascript中将

async:false、

更改为

async:true

否则，在请求发生时将停止执行：）

--编辑

---

这不应该在while循环中完成

同步ajax可能是问题所在。不要使用while循环（需要同步），而是将ajax放入函数中，并在

done

回调中调用它：

var done = false,
    offset = 0,
    limit = 20,
    my_num = 0;

function imagething(){

if(!done) {
    var url = "read_images.php?offset=" + offset + "&limit=" + limit + "&my_num=" + my_num;

    $.ajax({
        //async: false, defaults to async
        url: url
    }).done(function(response) {

        if (response.processed !== limit) {
            // asked to process 20, only processed <=19 - there aren't any more
            done = true;
        }
        my_num = response.my_num
        offset += response.processed;
        if(response.table_data != '') {
            $('#myTable > tbody:last').append(response.table_data);
        }
        $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " images.</span>");
        console.log(response);
        imagething(); //<--------------------------recursive call
    }).fail(function(jqXHR, textStatus) {

        $("#mybox").html("Error after processing " + offset + " images. Error: " + textStatus);

        done = true;
    });
}

var done=false，
偏移量=0，
限值=20，
my_num=0；
函数imagething（）{
如果（！完成）{
var url=“read_images.php？offset=“+offset+”&limit=“+limit+”&my_num=“+my_num；
$.ajax({
//async:false，默认为async
url:url
}).完成（功能（响应）{
如果（response.processed！==限制）{
//要求处理20，仅处理tbody:last'）.append（response.table_data）；
}
$（“#mybox”）.html（“总共处理了“+偏移量+图像”）；
控制台日志（响应）；
imagething（）；//异步调用在后台执行，而其他代码继续执行。如果进行同步调用，所有代码执行将等待请求完成。通常ajax请求是异步的，除非指定它们应同步运行。
为什么不使用异步ajax请求？@VWGolf2，什么是异步ajax请求？也许你应该发布一个回复来解释。他的意思是摆脱
async:false，
，这样javascript就不能在等待ajax请求响应时继续运行了。添加了一个答案，但显然已经有一些人更快了：如果他使用异步ajax，他的while循环将创建十亿个ajax调用。这是不可能的eds进一步重构。关于一个可能的解决方案，请参见我的答案。没有否决，但如果他这样做，他的while循环将创建10亿个ajax调用！！谢谢：P我没有注意到我删除了while循环，并将代码放入名为
imagething
的函数中。然后在ajax调用的完成回调中（启动
.done（function…
的位）我在末尾调用
imagething（）
，从而再次调用整个函数。
var done = false,
    offset = 0,
    limit = 20,
    my_num = 0;

function imagething(){

if(!done) {
    var url = "read_images.php?offset=" + offset + "&limit=" + limit + "&my_num=" + my_num;

    $.ajax({
        //async: false, defaults to async
        url: url
    }).done(function(response) {

        if (response.processed !== limit) {
            // asked to process 20, only processed <=19 - there aren't any more
            done = true;
        }
        my_num = response.my_num
        offset += response.processed;
        if(response.table_data != '') {
            $('#myTable > tbody:last').append(response.table_data);
        }
        $("#mybox").html("<span class=\"color_blue\">Processed a total of " + offset + " images.</span>");
        console.log(response);
        imagething(); //<--------------------------recursive call
    }).fail(function(jqXHR, textStatus) {

        $("#mybox").html("Error after processing " + offset + " images. Error: " + textStatus);

        done = true;
    });
}