javascript - 在另一个调用正在使用 php (Laravel) 执行长时间作业时创建一个 ajax

Question

我正在尝试制作一个实时填充的进度条。我试着改编这个 example到我的 laravel 项目，但可能我错过了一些东西。

我的 html 代码和 javascript 代码:

<div  style="border:1px solid black;width:500px;height:80px">
    <div class="bar" style="background-color:green;height:inherit;width:0px"></div>
</div>
<p id="progress"></p>
<button onclick="longJob()" type="button">long job</button>
<button onclick="getProgress()" type="button">progreso</button>

<script type="text/javascript">
function longJob(){
    $.ajax({
        url: "/longJob",
        type: "POST",
        success: function (response) {
            $('.bar').css('width', '250px');
        }
    })
}
function getProgress(){
    $.ajax({
        url: "/getProgress",
        type: "POST",
        success: function (response) {
            var progress = response['progress'];
            $('#progress').text(progress);
            if(progress < 10){
                getProgress();
            }
        }
    })
}
getProgress();
</script>

还有我的 php 函数:

public function longJob(){
    for($i=1;$i<=10;$i++){
        Session::set('progress', $i);
        sleep(1);
    }
    return response()->json([
        'success' => 'true'
    ]);
}
public function getProgress(){
    $progress = Session::get('progress');
    return response()->json([
        'progress' => $progress
    ]);
}

当我加载我的页面时，函数 getProgress() 开始反复运行，检索“0”。当我单击长作业按钮时，getProgress() 会停止 10 秒，直到 longJob 完成，然后检索进度 10。

Answer 1

此处的问题与 JavaScript 或您的 Ajax 实现无关。您在此处定义的两个 Ajax 函数都应该异步工作。

此问题与PHP 服务器被/longJob 请求阻塞有关。在 /longJob 请求完成之前，您的服务器不会处理其他请求。

这会导致您的 getProgress 函数等待仅在 /longJob 请求完成后才出现的响应。

PHP 内置服务器不会在单独的实例中运行每个请求。因此，一个长时间运行的请求将阻止所有其他请求。您将必须使用 XAMPP 服务器。