Jquery ajax calls the loop one after another without stopping the page

Question

I have a table of over 100 rows.

each line consists of PDF files and their descriptions using Last coloumn from STATUS.

STATUS INDICATES whether PDF files are readable, no.

As soon as the table loads in the browser, I get each file name from each row of the table and processing it with an ajax call. if the file is readable, I update the status field of this line as READABLE. processing of each pdf file takes from 30 seconds to 1 minute (depending on file size)

I do not want to use an asynchronous call and send all 100 requests to my server.

when i use async = false. it makes each ajax call one by one, here is what I want to do, but at the same time it stops the user to view the loaded table. so in other words, the user is stuck until all these ajax requests have been completed. then it can scroll down to the reader for more information.

I want to allow the user to read a webpage, while in the background I want to execute ajax requests one by one in order to process the PDF files and update its status on each line.

How can i do this.

$('table.tableRecods tr').each(function(){

            fileWithPath = $('#filePath').text();
            $this = $(this);
            $this.find('td.status img.cropStatus').attr('src', 'img/loader.gif') ;           
                $.ajax({
                    url:'jsonCall.php',
                    async:false,
                    data: {file: escape(fileWithPath)},
                    success: function(data){        

                            if(data.status == 'true') {
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/read.png') ;                                  
                            }else if(data.status == 'false'){
                                $this.find('td.status img.readStatus').attr('src', 'img/icons/__read.png') ;

                            }
                    }
                }); 

    });

Answer 1

. , , , . , , .

var toRequest=new Array("test1", "test2", "test3");
function doRequest(index) {
  $.ajax({
    url:'jsonCall.php?data='+toRequest[index],
    async:true,
    success: function(data){        
      //do whatever you want do do

      if (index+1<toRequest.length) {
        doRequest(index+1);
      }
    }
  }); 
}
doRequest(0);