Question

我正在尝试创建一个jquery函数，它将XML数据导入wordpress站点。在此过程中，我希望它单独导入帖子，然后在每次导入完成时更新进度条和/或计数器。

我遇到的问题是进度更新似乎都被阻止，直到整个过程完成，然后同时更新所有进程。

例如：不是以1/100完成更新页面，而是以2/100完成更新页面，而是等到最后，然后同时添加所有100个更新。

希望我的代码能比我更好地解释它：S

// Send inital data to check XML feed
$.ajax({
    url: ajaxurl,
    type: 'POST',
    data: ajaxdata
}).done( function(response) {

    ...

    // Process XML data
    $('#progress').html('<h3>Import Progress</h3><p id="import_status"></p>');

    data2 = $("#form_name").serialize();

    finished = false;
    count = 0;

    while (!finished) {

        var ajax = $.ajax({
            url: ajaxurl,
            data: data2,
            type: 'POST',
            async: false
        }).done(
            function(response2) {
                if (response2 == 0) {
                    finished = true;
                } else {
                    count++;
                    split = response2.toString().split("::");
                    $('#progress').append('<p><strong>Item'+count+'/'+split[0]+'</strong><br/><strong>Status:</strong> '+split[1]+'</p>');
                    if (count >= split[0]) {
                        finished = true;
                    }
                }
            }
        );

    } // while

    $('#progress').append('<p>Import Complete!</p>');

    ...

}

ajaxurl的php文件正在返回它应该在正确的位置。对于上下文，在while循环期间，php文件返回如下字符串：

    100::Some Status Information

其中100是将返回的总行数。

循环运行正确的次数，并在完成后输出所有正确的信息......但它不会逐项输出......它会同时输出所有信息。

我错过了什么？如何让它单独输出每个项目状态报告？

感谢您提供的任何帮助。

编辑：只是一些额外的信息，<h3>ImportProgress</h3>不会出现，直到while循环完成！整批出现了！

Answer 1

根据我的理解，Javascript在单个线程中运行，因此while迭代会阻止页面的执行和呈现。

为了在流程运行时显示Javascript的进度，您应该重构代码，以下答案显示了实现此目的的方法：Show javascript execution progress。

希望它有所帮助。

在ajax调用循环中使用jQuery更新页面元素

1 个答案: