WordPress插件中通过AJAX实现后台进程进度条的问题

你猜的完全正确——WordPress的AJAX请求采用同步响应模式：PHP脚本必须完整执行完毕，才会把所有输出一次性返回给浏览器。你在PHP循环中插入的JS代码，只会作为响应内容的一部分被浏览器缓存，直到整个请求结束后才会被解析，根本无法实时触发进度条更新。

要实现实时进度条，核心思路是把长任务拆分成「任务启动」和「进度查询」两个独立AJAX接口，前端通过定时轮询获取进度并更新UI。以下是完整可落地的代码示例：

1. PHP核心代码（插件主文件） #

// 注册AJAX动作与前端脚本
add_action('admin_footer', 'progress_bar_frontend_scripts');
add_action('wp_ajax_start_long_task', 'start_long_task_handler');
add_action('wp_ajax_get_task_progress', 'get_task_progress_handler');

// 注册后台任务钩子
add_action('run_long_task', 'execute_long_task');

// 输出前端JS
function progress_bar_frontend_scripts() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        const progressBar = $('#myBar');
        let pollTimer;

        // 绑定任务启动按钮事件（假设按钮ID为start-task-btn）
        $('#start-task-btn').on('click', function() {
            $(this).prop('disabled', true);
            progressBar.width('0%').text('0%');

            // 发送任务启动请求
            $.post(ajaxurl, { action: 'start_long_task' }, function(res) {
                if (res.success) {
                    // 每秒轮询一次进度
                    pollTimer = setInterval(() => {
                        $.post(ajaxurl, {
                            action: 'get_task_progress',
                            task_id: res.data.task_id
                        }, function(progressRes) {
                            const progress = progressRes.data.progress;
                            progressBar.width(progress + '%').text(progress + '%');

                            // 任务完成，停止轮询
                            if (progress >= 100) {
                                clearInterval(pollTimer);
                                $('#start-task-btn').prop('disabled', false);
                                alert('任务执行完成！');
                            }
                        });
                    }, 1000);
                } else {
                    alert('任务启动失败：' + res.data.msg);
                    $(this).prop('disabled', false);
                }
            });
        });
    });
    </script>
    <?php
}

// 启动后台任务
function start_long_task_handler() {
    // 生成唯一任务ID，避免多用户冲突
    $taskId = uniqid('progress_task_');
    // 初始化进度为0（临时存储1小时过期）
    set_transient($taskId, 0, 3600);

    // 用WP Cron异步执行长任务，避免当前请求超时
    wp_schedule_single_event(time(), 'run_long_task', [$taskId]);

    wp_send_json_success(['task_id' => $taskId]);
}

// 实际执行长任务的函数
function execute_long_task($taskId) {
    set_time_limit(0); // 取消执行时间限制（按需开启）
    $totalSteps = 10; // 模拟任务总步骤数

    for ($i = 1; $i <= $totalSteps; $i++) {
        // 替换为你的实际业务逻辑（比如数据处理、文件生成等）
        sleep(1);
        // 更新进度并存储
        $currentProgress = ($i / $totalSteps) * 100;
        set_transient($taskId, $currentProgress, 3600);
    }

    // 任务完成后清理临时存储
    delete_transient($taskId);
}

// 返回当前任务进度
function get_task_progress_handler() {
    $taskId = $_POST['task_id'];
    $progress = get_transient($taskId);

    // 任务不存在或已完成，直接返回100%
    if ($progress === false) {
        wp_send_json_success(['progress' => 100]);
    } else {
        wp_send_json_success(['progress' => $progress]);
    }
}

2. 关键细节说明 #

• 任务拆分：将长任务拆分为「启动」和「查询」接口，避免单个AJAX请求因超时被中断
• 进度存储：用WordPress自带的transient临时存储进度，自动过期不占用数据库资源
• 异步执行：通过wp_schedule_single_event将长任务交给WP Cron异步处理，避免阻塞前端请求
• 轮询机制：前端每秒发送一次进度查询请求，实时更新进度条UI

3. 进阶优化建议 #

• 如果任务耗时极长（超过10分钟），建议使用专业的后台任务库（如WP Background Processing）替代WP Cron
• 可动态调整轮询间隔（如进度低于50%时每2秒查一次，高于80%时每秒查一次），降低服务器压力
• 添加权限校验，确保只有授权管理员能触发任务
• 增加错误处理逻辑（如任务执行失败时，前端提示用户并清理临时数据）

内容的提问来源于stack exchange，提问作者Artificial Inheritance