AJAX progress bar of load script

I have a big problem to make a progress bar in AJAX. The whole page is in AJAX, inside one of the webpage is AJAX which loads a function to get some big rows from the database.

I tried to make progress bar in this script in a foreach loop a flush() method and by writing/reading to $_SESSION, but still nothing. I really tried everything I don`t know how to do this. Need only this to complete my project. Could someone help me with this?

It is anyway which script I want to load, how is the template for this progress bar to use it in GET or POST ajax, for any AJAX.

<script>
    jQuery(document).ready(function($) {
            
            $(document).on('click','#save',function () {
                setTimeout(getProgress,1000);
              $(this).text('Pobieram analizę...');
              $.urlParam = function(name){
             var results = new RegExp('[?&]' + name + '=([^&#]*)').exec(window.location.href);
    if (results==null){
       return null;
    }
    else{
       return decodeURI(results[1]) || 0;
    }
            }
        var id = $.urlParam('id');
        var idt = $.urlParam('idt');
                  $.ajax({
                                 url: "views/getresults.php?id="+id+"&idt="+idt,
                    success: function(data) {
                        $("#loadresults").append(data);
                    }
                });
                setTimeout(getProgress,3000);
            return false;
            });
            function getProgress(){
                
                $.ajax({
                    url: 'views/listen.php',
                    success: function(data) {
                        if(data<=100 && data>=0){
                            console.log(data);
                            $('#loadresults').html('<div id="progress"><div class="progress-bar" role="progressbar" style="width:'+ (data / 100)*100 +'%">'+ data + '/' +100+'</div></div>');
                            setTimeout(getProgress,1000);
                            console.log('Repeat');
                        } else {
                            $('#loadresults').text('Pobieram dane');
                            console.log('End');
                        }
                    }
                });
            }
        });
        </script>

and here is a getresults.php

    foreach($result as $resul) {
    $count++;
    session_start();
    $_SESSION['progress'] = $count;
    $_SESSION['total'] = 100;
    session_write_close();
    sleep(1);
}
unset($_SESSION['progress']); 

and a get progress function listen.php

<?php
session_start();
echo (!empty($_SESSION['progress']) ? $_SESSION['progress'] : '');

if (!empty($_SESSION['progress']) && $_SESSION['progress'] >= $_SESSION['total']) {
    unset($_SESSION['progress']);
}

?>

Answer

Writing and reading session doesn’t work because the standard behavior of PHP is to lock the session file while your main code is being executed.

Try to create a file and update the its content with the percentage done during the execution of your function. Something like:

<?php
function slowFunction() {
    $file = uniqid();
    file_put_contents($file, 0);
    // Long while that makes your stuff
    // you have to know how many loops you will make to calculate the progress
    $total = 100;
    $done = 0;
    while($done < $total) {
        $done++;
        // You may want not to write to the file every time to minimize changes of being writing the file 
        // at the same time your ajax page is fetching it, i'll let it to you...
        $progress = $done / $total;
        file_put_contents($file, $progress);
    }
    unlink($file); // Remove your progress file
}

?>