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函数都应该异步工作。

此问题与/longJob请求阻止了PHP服务器有关。在/longJob请求完成之前，服务器未处理其他任何请求。

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

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

在另一个调用使用php执行长时间作业时制作一个ajax（Laravel）

1 个答案: